首页 > 语言 > JavaScript > 正文

基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享

2024-05-06 14:38:36
字体:
来源:转载
供稿:网友

前言:前段时间一直都好忙也就好久没有写些东西了,最近手上的事刚好告些段落了,把以前空写的写插件都拿出来分享下吧,希望对大家有些帮助,也希望有高手能帮忙指点下我的写不足和错误,一直以来自己写的东西都是在用,性能方面个人只能尽量靠近问题还很多……真心求指点;
插件简介:执行渐隐等动画效果,可以这个插件为一个附加插件 可以配合前面我发的一个弹出层 等等之类的东西用增加js展示的趣味性,
使用方法:在下面的js代码里面前面写了,大家可以看看直接复制粘贴就可以用了有问题可以联系我</p
JS代码如下 展示方式可以复制下面的HTML查看
[javascript]
代码如下:
/*
 createByTommy_20110525
 emial:@csslife@163.com
 用途:
 执行渐隐等动画效果
 传入参数说明:
 1、第一个参数为需要变换对象或ID;
 2、第二个参数为一个对象包含:
 1)、sty->变换对象需要改变的属性,默认为改变宽度(也可以传非style的属性比如scrollTop等)
 2)、curClass->变换对象完成改变后需要添加的当前类,默认为空
 3)、maxVal->改变属于的最大值,默认为0(如果curClass为宽高等style属性表示隐藏),当这个要改变的属性值达到时停止动画
 4)、effect->执行的动画效果默认为outQuad,如需弹跳效果将其值设置为2
 3、最后个参数为可选参数表示当动画执行完毕后运行的回调函数
 */

//animation
var ani = function(){this.init.apply(this,arguments)}
ani.prototype = {
    _id:function(i){
        if(!i) return;
        return typeof i != "string" && i.nodeType === 1 ? i : document.getElementById(i);
    },
    init:function(e,s,callback){
        this.e = this._id(e);
        this.setInit(s||{});
        var maxS = parseInt(this.s.maxVal),speed = maxS==0?Math.max(this.getSty(this.e,this.s.sty),1):maxS/5;
        this.fun(speed,maxS,callback)
    },
    formula:function(x){
        var f;
        switch(this.s.effect){
            case 0:
                f = "outQuad";
                break;
            case 1:
                f = "inQuad";

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选