用tween写个例子!

最新推荐文章于 2022-08-18 14:48:54 发布

wtcsy

最新推荐文章于 2022-08-18 14:48:54 发布

阅读量1.3k

点赞数

分类专栏： javascript 随笔。。。。。。文章标签： function border div class properties each

本文链接：https://blog.csdn.net/wtcsy/article/details/4187192

版权

javascript 随笔。。。。。。专栏收录该内容

26 篇文章 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>

wtcsy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
用tween写个例子!

以前写这篇文章的时候,基本是模仿cloudgamer的, 过了这么久了,有能力也有时间重写一下了重新整合了一下代码,把tween类单独出来了........未完成................................（修改日期 2009-12-07 最近写样式写的我手发软） gliding#container1,#container2{heigh
复制链接

扫一扫

专栏目录