Tween二

你的名字 2022-08-06 02:26 136阅读 0赞

上个例子的算法写法都是别人的

所以想自己写一个  写法还是跟上一个相似  构造不一定  用的是scrolltop 和left 且没有用table

(只在ie下有效,如果谁知道怎么在ff下取innerText 麻烦告诉小弟一声)

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>  
<style type='text/css'>  
.wai\{width:408px;height:168px;margin:0 auto;background:\#ffffff; border:1px solid \#990000;overflow:hidden \}  
.zhong\{width:408px;height:168px;margin:0 auto;white-space:nowrap ;background:\#ffffff; overflow:hidden;padding:0px;\}  
.zhong1\{width:408px;height:168px;margin:0 auto;background:\#ffffff;overflow:hidden;padding:0px;\}  
.ni\{margin:0px; padding:0px;width:1224px;\}  
.ni1\{margin:0px; padding:0px; height:504px;\}  
.zhong li\{margin:0px; padding:0px; list-style:none; float:left;\}  
.zhong1 li\{margin:0px; padding:0px;\}  
.num\{ position: relative;top:-42px !important; top:-27px; right:-300px; float:left\}  
.num li\{  
   float: left;  
    list-style:none;  
    color: \#FF7300;  
    text-align: center;  
    line-height: 16px;  
    width: 16px;  
    height: 16px;  
    font-family: Arial;  
    font-size: 12px;  
    cursor: pointer;  
    margin: 1px;  
    border: 1px solid \#FF7300;  
    background-color:\#FFFFFF;  
\}  
.num li.on\{  
   float: left;  
    list-style:none;  
    color: \#fff;  
    text-align: center;  
    line-height: 16px;  
    width: 16px;  
    height: 16px;  
    font-family: Arial;  
    font-size: 12px;  
    cursor: pointer;  
    margin: 1px;  
    border: 1px solid \#FF7300;  
    background-color:\#FF7300;  
    font-weight: bold;  
\}  
</style>  
<body>  
  <div class='wai' id='sss' style='float:left'>  
   <div class='zhong' id='ss'>  
    <ul class='ni' id='s'>  
    <li><img src='http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093922593.p.gif'/></li>  
    <li><img src='http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093747234.p.jpg'/></li>  
    <li><img src='http://album.hi.csdn.net/app\_uploads/wtcsy/20081216/093508656.p.jpg'/></li>  
    </ul>  
   </div>  
  </div>

\},  
   Run:function(index)\{  
    index==undefined &&(index=this.Index);  
    index>=this.count&&(index=this.Index-1)&&(this.Direction = this.Direction\*(-1))||index<0&&(index=1)&&(this.Direction =this.Direction\*(-1))  
    this.target = this.Elmlength\*(this.Index=index);  
    this.t = 0;  
    this.b = parseInt(this.container\[this.Css\]);  
    this.c = (this.target - this.b) ;  
    this.Onstart();  
    this.Move()  
   \},  
   Move:function()\{  
    clearTimeout(this.timer);  
    if(this.c&&this.t<=this.d)  
    \{  
      this.MoveTo(Math.round(this.Tween(this.t++, this.b, this.c, this.d)));  
               this.timer = setTimeout(Bind(this,this.Move),this.Time);  
    \}  
   else  
    \{  
     this.MoveTo(this.target);       //减少误差  为了保证最后的位置一定在target上  
        this.Auto&&(this.timer = setTimeout(Bind(this,this.Next), this.Pause));  
    \}  
   \},  
   MoveTo:function(i)\{  
    this.container\[this.Css\] =i;  
   \},  
   Next:function()\{  
    this.Run(this.Index+this.Direction)  
   \}  
 \})  
 var ss = new gliding($('ss'),$('s'),3,\{d:70\});  
 ss.Run()  
 var aa = new gliding($('aa'),$('a'),3,\{d:50,Vertical:true\});  
 aa.Run()  
 ///带按纽的切换---横  
 var bb = new gliding($('bb'),$('b'),3,\{d:70\});  
 for(var i=1;i<=bb.count;i++)  
 \{$('an').appendChild(document.createElement('li')).innerHTML=i;\}  
 forEach($('an').getElementsByTagName('li'),function(o,i)\{  
  o.onmouseover = function()\{o.className='on';bb.Auto=false;bb.Run(i)\}  
  o.onmouseout  = function()\{;bb.Auto=true;bb.Run()\}  
 \})  
 bb.Onstart =function()\{  
  forEach($('an').getElementsByTagName('li'),function(o,i)\{  
   o.className =i==bb.Index?'on':'';  
  \})  
 \}  
 bb.Run()  
 //带按纽的切换---束  
 var cc = new gliding($('cc'),$('c'),3,\{d:50,Vertical:true\});  
  for(var i=1;i<=cc.count;i++)  
 \{$('an1').appendChild(document.createElement('li')).innerHTML=i;\}  
 forEach($('an1').getElementsByTagName('li'),function(o,i)\{  
  o.onmouseover = function()\{o.className='on';cc.Auto=false;cc.Run(i)\}  
  o.onmouseout  = function()\{;bb.Auto=true;cc.Run()\}  
 \})  
 cc.Onstart =function()\{  
  forEach($('an1').getElementsByTagName('li'),function(o,i)\{  
   o.className =i==cc.Index?'on':'';  
  \})  
 \}  
 cc.Run()  
</script>  
</body>