模仿jquery的animate（自定义动画）_建站学-个人建站指南,网页制作,网站设计,网站制作教程

首先要说，他们没有jquery的animate那么强大。

jquery的自定义动画很强大，使得我们在网页里添加动画变得容易。

引入一个巨大的代码框架一直是我不太喜欢的，所以我写了一个简单的自定义动画。

1：实例演示

OK这个动画代码当然没有jquery的animate那么强大。看下面的测试。

他现在能完成的功能比如 width height margin padding top lef 等等吧。

由于alpha（透明度）需要的判断比较多，所以还没加进去。

看下面的3个测试，我分别使用了这3个代码

jelle('cc').animate({width:'300px'},500,function(){this.style.backgroundColor='#333'});

jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});

jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});

这是一个测试的DIV

jelle('cc').animate({width:'300px'},500,function(){this.style.backgroundColor='#333'});
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});

2：使用说明

你可以看出他的用法基本上跟jquery一样。

jelle(id).animate({key:val},time,callback);

传递一个对象ID 然后设置对应的变化值,动画用时,回调函数。

3：源码解析

    var jelle=function(id){
        var elem=document.getElementById(id),//对象
            f=j=0,callback,_this={},//j动画总数
            tween=function(t,b,c,d){return -c*(t/=d)*(t-2) + b}
            //算子你可以改变他来让你的动画不一样
            _this.execution=function(key,val,t){
                    var s=(new Date()).getTime(),d=t || 500,
                        b=parseInt(elem.style[key]) || 0,
                        c=val-b,
                        a=function(){
                            var t=(new Date()).getTime()-s;
                            if(t>d){
                                t=d;
                                elem.style[key]=tween(t,b,c,d)+'px';
                                //if(++f==j && callback){callback.apply(elem)}
                                ++f==j&&callback&&callback.apply(elem);
                                //这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
                                //感觉很不错。
                                return true;
                            }
                            elem.style[key]=tween(t,b,c,d)+'px';
                            setTimeout(a,10);
                            //我记得可以不要a这个变量，忘记怎么写了。
                        }
                    a();//我记得在javascript书上看到有可以调用匿名函数，但是忘记怎么写了。
                    //只能写一个这个了。
                }
            _this.animate=function(sty,t,fn){
                    callback=fn;
                    //多key 循环设置变化
                    for(var i in sty){
                            j++;//动画计数器用于判断是否所有动画都完成了。
                            _this.execution(i,parseInt(sty[i]),t);
                        }
                }
            return _this;
        }

他其实很简单。呵呵。

4：源码

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="position:relative; height:300px;">
<div style="width:200px; height:200px; border:1px solid #CCC;  position:absolute; overflow:hidden;" id="cc"></div>
</div>
<script type="text/javascript">
    var jelle=function(id){
        var elem=document.getElementById(id),//对象
            f=j=0,callback,_this={},//j动画总数
            tween=function(t,b,c,d){return -c*(t/=d)*(t-2) + b}
            //算子你可以改变他来让你的动画不一样
            _this.execution=function(key,val,t){
                    var s=(new Date()).getTime(),d=t || 500,
                        b=parseInt(elem.style[key]) || 0,
                        c=val-b,
                        a=function(){
                            var t=(new Date()).getTime()-s;
                            if(t>d){
                                t=d;
                                elem.style[key]=tween(t,b,c,d)+'px';
                                //if(++f==j && callback){callback.apply(elem)}
                                ++f==j&&callback&&callback.apply(elem);
                                //这句跟上面注释掉的一句是一个意思，我在google压缩的时候发现了这句
                                //感觉很不错。
                                return true;
                            }
                            elem.style[key]=tween(t,b,c,d)+'px';
                            setTimeout(a,10);
                            //我记得可以不要a这个变量，忘记怎么写了。
                        }
                    a();//我记得在javascript书上看到有可以调用匿名函数，但是忘记怎么写了。
                    //只能写一个这个了。
                }
            _this.animate=function(sty,t,fn){
                    callback=fn;
                    //多key 循环设置变化
                    for(var i in sty){
                            j++;//动画计数器用于判断是否所有动画都完成了。
                            _this.execution(i,parseInt(sty[i]),t);
                        }
                }
            return _this;
        }
</script>


<textarea id="test1" style="width:500px; height:100px;">
jelle('cc').animate({width:'300px',height:'250px'},500,function(){alert(1);this.style.backgroundColor='#333'});
</textarea>
<input type="button" onclick="eval(document.getElementById('test1').value)" value="运行代码" />
<br/>
<textarea id="test2" style="width:500px; height:100px;">
jelle('cc').animate({height:'300px'},500,function(){this.style.backgroundColor='#000'});
</textarea>
<input type="button" onclick="eval(document.getElementById('test2').value)" value="运行代码" />
<br/>
<textarea id="test3" style="width:500px; height:100px;">
jelle('cc').animate({width:'200px',height:'200px'},500,function(){this.style.backgroundColor=''});
</textarea>
<input type="button" onclick="eval(document.getElementById('test3').value)" value="运行代码" />




</body>
</html>

下面是压缩以后的JS

var jelle=function(p){var d=document.getElementById(p),q=j=0,h,e={};e.execution=function(b,i,k){var f=(new Date).getTime(),g=k||500,l=parseInt(d.style[b])||0,n=i-l,o=function(){var a=(new Date).getTime()-f;if(a>g){a=g;var m=d.style,c=a;a=-n*(c/=g)*(c-2)+l;m[b]=a+"px";++q==j&&h&&h.apply(d);return true}m=d.style;c=a;a=-n*(c/=g)*(c-2)+l;m[b]=a+"px";setTimeout(o,10)};o()};e.animate=function(b,i,k){h=k;for(var f in b){j++;e.execution(f,parseInt(b[f]),i)}};return e};

根据自己的需要去改变他，既可以让你的页面使用少的JS代码，又可以加快自己的开发效率。我喜欢把一些小的功能封装起来。使用更加方便。

(责任编辑：admin)

搜索

热门标签:

模仿jquery的animate（自定义动画）