`
enix2212
  • 浏览: 24042 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
sp42
社区版块
存档分类
最新评论

Animate Baseclass

javascript 
阅读更多
以下代码仅供参考，请下载附件代码，应该是文本编辑器过滤掉了某些字符导致不能运行。 

<!--<!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>Animate Baseclass</title>
<style type="text/css">
#square { background: #eee; height: 120px; width: 120px; border: 2px solid #CCC; position: absolute; left: 100px; top: 100px; }
</style>
</head>

<body>
<div id="square">Animate</div>
<script type="text/javascript">


function Animate(o,f,g){var h=this,indicator=arguments.callee,origin=null,config=null;if(!(h instanceof indicator))return new indicator(o,f,g);config={O:h.o=o,P:h.property=f,T:h.t=g.t||0,C:h.c=g.c||50,D:h.d=g.d||100,R:h.r=g.r||false};'function'===typeof(g.callback)&&(config.fn=g.callback);if(1!==config['O'].nodeType)return false;undefined===this.Tween&&(indicator.prototype.Tween=function(){return h.Bounce.apply(h,arguments)});indicator.prototype.constructor=indicator;indicator.prototype.Bounce=function(t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}};indicator.prototype.fx=function(t,b,c,d){var a=Math.ceil(h.Tween.apply(h,arguments));if(a>h.c){return false}return(true===config['R']?(-a):(a))+origin};indicator.prototype.play=function(O,P){var t=config['T'],b=0,end=false;origin=parseInt(h.currentStyle(o,f));void function(){var a=h.fx(t,b,config['C'],config['D']);O.style[P]=a+'px';Math.abs(a)<config['C']+origin?(t++,setTimeout(arguments.callee,13)):end=true;(true===end&&undefined!==config['fn'])&&(setTimeout(function(){config['fn'].call(h)},300))}()};indicator.prototype.currentStyle=function(a,b){var c=null;return undefined!==a.currentStyle?a.currentStyle[b]:document.defaultView.getComputedStyle(a,null)[b]};Animate.doFade=function(a,b,c,d){var e=undefined!==window.ActiveXObject,calls=arguments.callee,t=this,step;b+=(c?1:-1)/a,(c?b>1:b<0)&&(b=c?1:0),e===true?t.style.filter='alpha(opacity='+b*100+')':t.style.opacity=b;(c?b<1:b>0)&&setTimeout(function(){calls.call(t,a,b,c,d)},1000/a);(c?b===1:b===0&&'undefined'!==typeof d)&&('function'===typeof d&&d.call(t))};Animate.fadeOut=function(a){Animate.doFade.call(this,a/10,1,false)};Animate.fadeIn=function(a){Animate.doFade.call(this,a/10,0,true)};h.play.call(h,config['O'],config['P'])};
*/		
//demo1 面积由中心变化  
    //Animate(square,'height',{c:square.offsetHeight,d:100});  
    //Animate(square,'width',{c:square.offsetWidth,d:100});  
//demo2 综合运动及无限回调  
    /*new Animate(square,'left',{c:300,d:100,callback:function(){   
        setTimeout(function(){  
            new Animate(square,'width',{c:square.offsetWidth,d:200});  
            new Animate(square,'height',{c:square.offsetHeight,d:200});  
            new Animate(square,'top',{c:square.offsetHeight,r:true,d:200,callback:  
                function(){  
                    try{square.parentNode.removeChild(square)}catch(e){};  
                }  
            });  
            fadeOut.call(square,300) ;  
        },2000);  
    }});*/  
      
      
    /*new Animate(square,'left',{c:300,d:100,callback:function(){   
        setTimeout(function(){  
            new Animate(square,'width',{c:square.offsetWidth,d:200});  
            new Animate(square,'height',{c:square.offsetHeight,d:200,callback:function(){  
                  
                new Animate(square,'top',{c:square.offsetHeight,r:true,d:200,callback:  
                    function(){  
                        //try{square.parentNode.removeChild(square)}catch(e){};  
                        new Animate(square,'top',{c:square.offsetHeight,d:200,callback:function(){  
                            new Animate(square,'top',{c:square.offsetHeight,d:200});  
                        }});  
                    }  
                });  
                      
            }});  
              
            //fadeOut.call(square,300) ;  
        },2000);  
    }});   */
       
//demo3 位置面积变化  
//Animate(square,'top');  
//1  
//Animate(square,'width',{c:square.offsetWidth-100,d:100});  
//2  
//Animate(square,'left',{c:square.offsetHeight,d:100});  
  
//demo4  不规则运动  
//Animate(square,'left',{c:square.offsetWidth-100,d:100});  
//Animate(square,'top',{c:square.offsetHeight,d:140});  
	
	
</script>
</body>
</html>


1.改进了代码
2.修正了宽高变化时，从物体中心扩展。
3.修改构造函数，可以不使用new就能实例化。
4.组合了透明度变化
  • fx.zip (2.4 KB)
  • 下载次数: 2
分享到：
| 很棒的时间线控件
评论
1 楼 percy30856 2011-07-29  
好东西 正在弄这个玩意儿 参考学习了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics