用tween写个例子!

分手后的思念是犯贱 2022-08-06 02:06 130阅读 0赞

以前写这篇文章的时候,基本是模仿cloudgamer的, 过了这么久了,有能力也有时间重写一下了

重新整合了一下代码,把tween类单独出来了........

未完成................................（修改日期 2009-12-07 最近写样式写的我手发软）

<!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><title>gliding</title> <style type="text/css"> \#container1,\#container2\{ height:168px;width:408px;position:relative;overflow:hidden; border:1px solid \#999999; \} \#container1 div,\#container2 div\{ height:16px; width:16px;font-size:14px; position:absolute; cursor: pointer;margin: 1px;border: 1px solid \#FF7300;background-color:\#FFFFFF; color: \#FF7300;text-align: center;line-height: 16px;vertical-align:middle; \} \#container1 .on,\#container2 .on\{ border: 1px solid \#FF7300; background-color:\#FF7300; font-weight: bold; color: \#FFFFFF; \} /\*=============================================================第3个效果的样式============================\*/ .example\{ width:525px; height:245px; border:1px solid \#DEDEDE; background:\#F8F8F8; \} .example \#container3\{ height:210px; width:400px;position:relative; overflow:hidden; margin:16px;float:left; z-index:10; background-color:\#FFFF33; display: inline; margin-right:0px; \} .example \#container3 \#block3\{ height:840px; width:400px; position:absolute; \} .example \#btn3\{ height:208px; width:91px; float:right; margin-top:16px; margin-right:4px; position:relative \} .example \#btn3 img\{ width:75px; height:45px; cursor: pointer; \} /\*=============================================================第4个效果的样式============================\*/ \#container4\{ height:447px; width:240px;border-left:4px solid \#797979;border-right:4px solid \#797979; overflow:hidden; position:relative \} \#btn4\{ width:153px; height:28px; position:absolute; z-index:5; left:43px; bottom:1px; \} \#btn4\_block\{ height:24px;width:39px; margin:2px 0px 0px 8px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043\_1260689202c9mO.gif); position:absolute; z-index:30; \} </style> <script type="text/javascript"> document.all&&document.execCommand("BackgroundImageCache", false, true); function Class(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Bind = function(object, fun) \{ var args = Array.prototype.slice.call(arguments).slice(2); return function() \{ return fun.apply(object, args); \} \}; function Each(list, fun)\{ for (var i = 0, len = list.length; i < len; i++) \{fun(list\[i\], i); \} \}; var Sys = (function(ua)\{ var s = \{\}; s.IE = ua.match(/msie (\[/d.\]+)/)?true:false; s.Firefox = ua.match(/firefox//(\[/d.\]+)/)?true:false; s.Chrome = ua.match(/chrome//(\[/d.\]+)/)?true:false; s.IE6 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 6))?true:false; s.IE7 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 7))?true:false; s.IE8 = (s.IE&&(\[/MSIE (/d)/.0/i.exec(navigator.userAgent)\]\[0\]\[1\] == 8))?true:false; return s; \})(navigator.userAgent.toLowerCase()); var wt = \{ elm: null, $ : function(id,p)\{ var arr = id.split(" "); this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr\[0\]).getElementsByTagName(arr\[1\]); return p?this.elm:wt; \}, $$ : function(o,v,p)\{ this.elm = v?o.getElementsByTagName(v):o; return p?this.elm:wt; \}, Extend : function(destination, source)\{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \}, CurrentStyle : function(element)\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \} \}; //===================================================================================================以上都是公共的方法,下面才是程序内容========== var gliding = new Class(\{ options :\{ type : 1, //1表示是横着的 0表示是束者着的 direction : -1, //-1表示象上或者向左 num : 3, //多少个变化的对象 step : 0, //叫做步长吧 就是图片的宽度或者是高度 Time : 2000, //间隔 Onstart : function()\{\} //回掉 应该还有 Onend Onmove 现在没兴趣在添加 \}, initialize : function(container,block,config,options)\{ this.container = container; //最外层容器 this.count = 1; //记录在第几个变化的图片上 this.timer = null; //是停顿多长时间换下张图片的定时器 wt.Extend(this.options,options||\{\}); wt.Extend(this,this.options); var \_self = this; wt.Extend(config,\{howgo:function()\{ this.\_obj.style\[\_self.type?"left":"top"\] = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"; \},Onend:function()\{ \_self.count++; if(\_self.count == \_self.num) \_self.count = 0; \_self.Set(); \},Onstart: function()\{ \_self.Onstart(); \}\}); delete options; this.Tweenmove = new TweenMove(block,config); this.Tweenmove.Go() ; \}, Set : function(arg)\{ this.Tweenmove.Clear(); clearTimeout(this.timer); //清除2个定时器 一个是记录图片运动的(上面那个) 一个是控制多长时间后进行下次运动 this.Tweenmove.t = 0; this.Tweenmove.b = parseInt(wt.CurrentStyle(this.Tweenmove.\_obj)\[this.type ? 'left' : 'top'\])||0; this.Tweenmove.c = this.count\*this.step\*this.direction - this.Tweenmove.b; var \_self = this; arg = arg?0:this.Time; //如果是事件触发就直接执行; this.timer = setTimeout(Bind(\_self.Tweenmove,\_self.Tweenmove.Go),arg); \} \}); //===========================================================================================================================以下是缓动的类============== var TweenMove = new Class(\{ options : \{ t : 0, //t,b,c,d,都是缓动的参数 b : 0, c : 0, d : 0, timer : null, Tween : function(t,b,c,d)\{return -c \* ((t=t/d-1)\*t\*t\*t - 1) + b;\}, //缓动公式 howgo : function()\{this.\_obj.style.left = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"\}, //设置什么来执行缓动 Onstart : function()\{\}, Onmove : function()\{\}, Onend : function()\{\} \}, initialize : function(obj,options)\{ this.\_obj = obj; wt.Extend(this.options,options||\{\}); wt.Extend(this,this.options); delete options; \}, Go : function()\{ Tweencommand.Start(this).Move(this).End(); \}, Clear: function()\{ clearTimeout(this.timer); \} \}); //===============================================================================================================================缓动的一些公共方法========= //因为缓动的对象可能不是一个 但是方法是一样的 就单独写成一个对象了 var Tweencommand =\{ Start : function(o)\{ o.Onstart(); return this; \}, Move : function(o)\{ o.howgo(); o.Onmove(); if(o.t<o.d) \{o.t++;o.timer=setTimeout(function()\{Tweencommand.Move(o)\},1)\} else this.End(o); return this; \}, End : function(o)\{ if(!o)return; o.Onend(); \} \}; </script> </head> <body style="margin:0px; padding:20px;"> <table width="200" border="0" cellspacing="10" cellpadding="0"> <tr> <td > <div id='container1'> <table id='block' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'> <tr> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093922593.p.gif"></td> </tr> <tr> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093747234.p.jpg"></td> </tr> <tr> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093508656.p.jpg"></td> </tr> </table> <div class="on" style="left:320px;bottom:8px;">1</div> <div style="left:345px;bottom:8px;">2</div> <div style="left:370px;bottom:8px;">3</div> </div> </td> <td> <div id='container2'> <table id='block2' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'> <tr> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093922593.p.gif"></td> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093747234.p.jpg"></td> <td><img src="http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093508656.p.jpg"></td> </tr> </table> <div class="on" style="left:320px;bottom:8px;">1</div> <div style="left:345px;bottom:8px;">2</div> <div style="left:370px;bottom:8px;">3</div> </div> </td> </tr> </table> <br> <table width="200" border="0" cellspacing="10" cellpadding="0"> <tr> <td > <div class="example"> <div id="container3"> <div id="block3"> <div><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203628OOjz.jpg"></div> <div><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203629WxJd.jpg"></div> <div><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203630D34i.jpg"></div> <div><img src="http://hi.csdn.net/attachment/200912/7/79043\_126020363139kx.jpg"></div> </div> </div> <div id="btn3" > <div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203628OOjz.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203629WxJd.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043\_1260203630D34i.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043\_126020363139kx.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div> <div id="btn\_block3" style="height:52px; width:91px; position:absolute; z-index:5; top:0px;"><img src="http://beta.hi.csdn.net/attachment/200912/7/79043\_1260205123OxMO.gif" style="height:52px; width:91px"></div> </div> </div> </td> <td> <div style=" height:8px; width:248px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043\_126068953713w1.gif); margin-bottom:-1px; overflow:hidden"></div> <div id="container4"> <table id="block4" width="720" border="0" cellspacing="0" cellpadding="0" style="position: absolute; z-index:3"> <tr> <td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043\_12606892018MCx.jpg"></td> <td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043\_1260689201IZ9E.jpg"></td> <td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043\_1260689202Z1mr.jpg"></td> </tr> </table> <div id='title4' style="width:240px; height:120px; position:absolute;;z-index:5; bottom:30px;"></div> <div id="btn4" > <div id="btn4\_block" usemap="\#ss"> </div> <img src="http://hi.csdn.net/attachment/200912/13/79043\_1260689202o7Tr.gif" usemap="\#tag" border="0"> <map id ="tag" name="tag"> <area shape ="rect" coords ="0,0,50,50" style="cursor:pointer" /> <area shape ="rect" coords ="50,-1,100,49" style="cursor:pointer" /> <area shape ="rect" coords ="100,0,150,50" style="cursor:pointer" /> </map> </div> </div> <div style=" height:8px; width:248px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043\_1260689537Nis5.gif);overflow:hidden"></div> </td> </tr> </table> <script type="text/javascript"> window.onload = function()\{ var divs = wt.$("container1 div",1); var div1s = wt.$("container2 div",1); var div2s = wt.$("btn3 div",1); //==============================================第一个例子============================================== var ss = new gliding(wt.$("container1",1),wt.$("block",1),\{b:0,c:-168,d:50\},\{type:0,step:168,Onstart:function()\{ var count = this.count; Each(divs,function(obj,i)\{obj.className = "";divs\[count\].className = "on";\}); \}\}); Each(divs,function(obj,i)\{ obj.onmouseover = function()\{ss.count=i;ss.Set(1);\}; \}); //==============================================第二个例子============================================== var ss1 = new gliding(wt.$("container2",1),wt.$("block2",1),\{b:0,c:-408,d:50\},\{type:1,step:408,Onstart:function()\{ var count = this.count; Each(div1s,function(obj,i)\{obj.className = "";div1s\[count\].className = "on";\}); \}\}); Each(div1s,function(obj,i)\{ obj.onmouseover = function()\{ss1.count=i;ss1.Set(1);\}; \}); //==============================================第三个例子============================================== var ss2 = new gliding(wt.$("container3",1),wt.$("block3",1),\{b:0,c:-210,d:50\},\{num:4,type:0,step:210,Onstart:function()\{\}\}); var ss3 = new gliding(wt.$("btn3",1),wt.$("btn\_block3",1),\{b:0,c:52,d:50,Tween:function(t,b,c,d,a,p)\{ if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d\*.3; if (!a || a < Math.abs(c)) \{ a=c; var s=p/4; \} else var s = p/(2\*Math.PI) \* Math.asin (c/a); return (a\*Math.pow(2,-10\*t) \* Math.sin( (t\*d-s)\*(2\*Math.PI)/p ) + c + b); \}\},\{direction:1,num:4,type:0,step:52\}); Each(div2s,function(obj,i)\{ if(i==4)return obj.onmouseover = function()\{ss2.count=i;ss2.Set(1);ss3.count=i;ss3.Set(1);\}; \}); //==============================================第四个例子============================================== var areas = wt.$("tag area",1); var ph = new gliding(wt.$("container4",1),wt.$("block4",1),\{b:0,c:-240,d:50,Tween:function(t,b,c,d)\{return -c \* ((t=t/d-1)\*t\*t\*t - 1) + b;\}\},\{direction:-1,num:3,type:1,step:240\}); var ph1 = new gliding(wt.$("btn4",1),wt.$("btn4\_block",1),\{b:0,c:50,d:50\},\{direction:1,num:3,type:1,step:50\}) Each(areas,function(obj,i)\{ obj.onmouseover = function()\{ph.count=i;ph.Set(1);ph1.count=i;ph1.Set(1);\}; \}) \} </script> </body> </html>