大图滚动+tween算法

 这两天刚学了大图滚动和Tween算法，感觉学到的不仅仅是效果，更多的是编程的思想。

大图滚动实际上就是一个moveTo（s,e,callback）的函数来回使用，这个moveTo（s,e,callback）的函数主要作用告诉起点和终点还有scrollLeft++还是top++就可以让图片从起始位置运动到终点，根据这个函数就可以写出：1.点击第几张运动到第几张，点左左运动，自动滚动，都是通过利用这个函数实现的，感觉有点面向对象的味道了。

Tween算法是个很好的算法，有时间一定要好好的深入研究一下。写运动的时候很多都要用到Tween算法。

大图滚动还用到了回调函数，回调函数最大的好处就是解耦合了，好像也很有面向对象的思想哦！感觉特别棒！回调函数实际上就是把要执行的语句在单独写一个函数作为参数传给另一个使用该语句的函数。

回调函数的代码

 

function a(num) {
    //......
    num();
}
a(function(){
    alert('ok');
});

 

    "demo1"> 

        

1

 

        

2

 

        

3

 

        

4

 

     

    "button" value="<" id="left"> 

    "button" value=">" id="right"> 

 

    "text/javascript"> 

        var t1,t2,t3; 

        var d=5; 

        var showIndex=0;//当前显示第几张图片 

        var demo=document.getElementById("demo"); 

        var demo1=document.getElementById("demo1"); 

        var lis=demo1.getElementsByTagName("li"); 

        var left=document.getElementById("left"); 

        var right=document.getElementById("right"); 

        //事件监听器 

        function addEventHaddler(target,type,func){ 

            if(target.addEventListener) 

                target.addEventListener(type,func,false); 

            else if(target.attachEvent) 

                target.attachEvent("on"+type,func); 

            else 

                target["on"+type]=func; 

        } 

        function removeEventHaddler(target,type,func){ 

            if(target.removeEventListener) 

                target.removeEventListenner(target,type,func); 

            else if(target.detachEvent) 

                target.detachEvent("on"+type,func); 

            else 

                delete target["on"+type];                        

        } 

        var Tween = { 

             Quart: { 

                easeIn: function(t,b,c,d){ 

                    return c*(t/=d)*t*t*t + b; 

                }, 

                easeOut: function(t,b,c,d){ 

                    return -c * ((t=t/d-1)*t*t*t - 1) + b; 

                }, 

                easeInOut: function(t,b,c,d){ 

                    if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 

                    return -c/2 * ((t-=2)*t*t*t - 2) + b; 

                } 

            } 

        } 

        //运动-终点函数 

        function moveTo(s,e,callback1,callback2){ 

            if(t1){ 

                clearTimeout(t1); 

                clearTimeout(t2); 

            } 

            var t=0; 

            var b=s; 

            var c=e-s; 

            var x; 

             

             

             function move(){ 

                if(t==d){ 

                     

                    callback1(e); 

                    clearTimeout(t1); 

                    t2=setTimeout(function(){Toright();},2000); 

                } 

                else{ 

                    t++; 

                    x=Tween.Quart.easeOut(t,b,c,d); 

                    callback2(x); 

             

                    t1=setTimeout(move,17); 

                } 

            } 

            move(); 

        } 

        //通用赋值 

        function move1(num){ 

            moveTo(demo.scrollLeft,num*demo.offsetWidth,function (e){demo.scrollLeft = e;},function (s){demo.scrollLeft=s;}); 

        } 

        function bg(a){ 

            for (var i=0;i

                if(i==a) 

                    lis[i].className="sp"; 

                else 

                    lis[i].className=""; 

            } 

        } 

        //加载后运行 

        function load(){ 

            for(var i=0;i

                lis[i].onmouseover=function (){ 

                    if(t2) 

                        clearTimeout(t2); 

                    for(var i=0;i

                        if(this==lis[i]){ 

                            move1(i); 

                            showIndex=i; 

                            bg(i); 

                                                         

                        } 

                         

                    } 

                     

                     

                } 

                 

            } 

        }  

        //向右滚动 

        function Toright1(){ 

            if(t3) 

                clearTimeout(t3); 

            if(t2) 

                clearTimeout(t2); 

            if(showIndex==lis.length-1) 

                showIndex=0; 

            else 

                showIndex++; 

            move1(showIndex); 

            bg(showIndex); 

             

             

        } 

        function Toright(){ 

            t2=setTimeout(function(){Toright1();},2000); 

        } 

         

        addEventHaddler(right,"click",function (){ 

                                        if(t2) 

                                            clearTimeout(t2); 

                                        Toright1(); 

                }); 

        //向左运动 

        function Toleft(){ 

            if(t2) 

                clearTimeout(t2); 

            if(showIndex==0) 

                showIndex=lis.length-1; 

            else 

                showIndex--; 

            move1(showIndex); 

            bg(showIndex); 

             

        } 

        addEventHaddler(left,"click",function (){Toleft();}); 

        //自动滚动 

        t3=setTimeout(function(){Toright();},2000);