Chinaunix首页 | 论坛 | 博客

zhanfeng0102的ChinaUnix博客zhanfeng.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zhanfeng0102

  • 博客访问： 45151
  • 博文数量： 34
  • 博客积分： 831
  • 博客等级： 军士长
  • 技术积分： 310
  • 用 户 组： 普通用户
  • 注册时间： 2012-10-08 11:15
文章分类

全部博文（34）

文章存档

2012年（34）

我的朋友
最近访客
推荐博文
相关博文
大图滚动+tween算法

分类： 系统运维

2012-10-08 17:36:30

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

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

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

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

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

回调函数的代码：


点击(此处)折叠或打开

  1. 　　function a(num) {
  2. 　　    //......
  3. 　　    num();
  4. 　　}
  5. 　　a(function(){
  6. 　　    alert('ok');
  7. 　　});
MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

大图滚动代码：


点击(此处)折叠或打开

  1. 　　<!DOCTYPE html>
  2. 　　<html>
  3. 　　<head>
  4. 　　    <meta charset="utf-8" />
  5. 　　    <title> new document </title>
  6. 　　    <meta name="keywords" content="" />
  7. 　　    <meta name="description" content="" />
  8. 　　    <style>
  9. 　　        div,table,tr,td,li,ul,body{margin:0;padding:0;}
  10. 　　        .outer{height:500px;width:500px;margin:0 auto;position:relative;}
  11. 　　        #demo{height:300px;width:300px;margin:0 auto;overflow:hidden;}
  12. 　　        img{height:300px;width:300px;}
  13. 　　        ul{position:absolute;left:270px;top:250px;}
  14. 　　        li{height:16px;width:16px;background:#fff;margin:2px;float:left;color:#faa;list-style-type:none;text-align:center;line-height:16px;cursor:pointer;}
  15. 　　        #left{position:absolute;left:70px;top:150px;cursor:pointer;}
  16. 　　        #right{position:absolute;left:400px;top:150px;cursor:pointer;}
  17. 　　        .sp{background:red;}
  18. 　　    </style>
  19. 　　</head>
  20. 　　<body onload="load();">
  21. 　　<div class="outer">
  22. 　　    <div id="demo">
  23. 　　        <table cellpadding=0 cellspacing=0>
  24. 　　            <tr>
  25. 　　                <td><img src="1.jpg" alt=""></td>
  26. 　　                <td><img src="2.jpg" alt=""></td>
  27. 　　                <td><img src="3.jpg" alt=""></td>
  28. 　　                <td><img src="4.jpg" alt=""></td>
  29. 　　            </tr>
  30. 　　        </table>
  31. 　　    </div>
  32. 　　    <ul id="demo1">
  33. 　　        <li>1</li>
  34. 　　        <li>2</li>
  35. 　　        <li>3</li>
  36. 　　        <li>4</li>
  37. 　　    </ul>
  38. 　　    <input type="button" value="<" id="left">
  39. 　　    <input type="button" value=">" id="right">
  40. 　　</div>
  41. 　　    <script type="text/javascript">
  42. 　　        var t1,t2,t3;
  43. 　　        var d=5;
  44. 　　        var showIndex=0;//当前显示第几张图片
  45. 　　        var demo=document.getElementById("demo");
  46. 　　        var demo1=document.getElementById("demo1");
  47. 　　        var lis=demo1.getElementsByTagName("li");
  48. 　　        var left=document.getElementById("left");
  49. 　　        var right=document.getElementById("right");
  50. 　　        //事件监听器
  51. 　　        function addEventHaddler(target,type,func){
  52. 　　            if(target.addEventListener)
  53. 　　                target.addEventListener(type,func,false);
  54. 　　            else if(target.attachEvent)
  55. 　　                target.attachEvent("on"+type,func);
  56. 　　            else
  57. 　　                target["on"+type]=func;
  58. 　　        }
  59. 　　        function removeEventHaddler(target,type,func){
  60. 　　            if(target.removeEventListener)
  61. 　　                target.removeEventListenner(target,type,func);
  62. 　　            else if(target.detachEvent)
  63. 　　                target.detachEvent("on"+type,func);
  64. 　　            else
  65. 　　                delete target["on"+type];                        
  66. 　　        }
  67. 　　        var Tween = {
  68. 　　             Quart: {
  69. 　　                easeIn: function(t,b,c,d){
  70. 　　                    return c*(t/=d)*t*t*t + b;
  71. 　　                },
  72. 　　                easeOut: function(t,b,c,d){
  73. 　　                    return -c * ((t=t/d-1)*t*t*t - 1) + b;
  74. 　　                },
  75. 　　                easeInOut: function(t,b,c,d){
  76. 　　                    if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  77. 　　                    return -c/2 * ((t-=2)*t*t*t - 2) + b;
  78. 　　                }
  79. 　　            }
  80. 　　        }
  81. 　　        //运动-终点函数
  82. 　　        function moveTo(s,e,callback1,callback2){
  83. 　　            if(t1){
  84. 　　                clearTimeout(t1);
  85. 　　                clearTimeout(t2);
  86. 　　            }
  87. 　　            var t=0;
  88. 　　            var b=s;
  89. 　　            var c=e-s;
  90. 　　            var x;
  91. 　　            
  92. 　　            
  93. 　　             function move(){
  94. 　　                if(t==d){
  95. 　　                    
  96. 　　                    callback1(e);
  97. 　　                    clearTimeout(t1);
  98. 　　                    t2=setTimeout(function(){Toright();},2000);
  99. 　　                }
  100. 　　                else{
  101. 　　                    t++;
  102. 　　                    x=Tween.Quart.easeOut(t,b,c,d);
  103. 　　                    callback2(x);
  104. 　　            
  105. 　　                    t1=setTimeout(move,17);
  106. 　　                }
  107. 　　            }
  108. 　　            move();
  109. 　　        }
  110. 　　        //通用赋值
  111. 　　        function move1(num){
  112. 　　            moveTo(demo.scrollLeft,num*demo.offsetWidth,function (e){demo.scrollLeft = e;},function (s){demo.scrollLeft=s;});
  113. 　　        }
  114. 　　        function bg(a){
  115. 　　            for (var i=0;i<lis.length;i++){
  116. 　　                if(i==a)
  117. 　　                    lis[i].className="sp";
  118. 　　                else
  119. 　　                    lis[i].className="";
  120. 　　            }
  121. 　　        }
  122. 　　        //加载后运行
  123. 　　        function load(){
  124. 　　            for(var i=0;i<lis.length;i++){
  125. 　　                lis[i].onmouseover=function (){
  126. 　　                    if(t2)
  127. 　　                        clearTimeout(t2);
  128. 　　                    for(var i=0;i<lis.length;i++){
  129. 　　                        if(this==lis[i]){
  130. 　　                            move1(i);
  131. 　　                            showIndex=i;
  132. 　　                            bg(i);
  133. 　　                                                        
  134. 　　                        }
  135. 　　                        
  136. 　　                    }
  137. 　　                    
  138. 　　                    
  139. 　　                }
  140. 　　                
  141. 　　            }
  142. 　　        }
  143. 　　        //向右滚动
  144. 　　        function Toright1(){
  145. 　　            if(t3)
  146. 　　                clearTimeout(t3);
  147. 　　            if(t2)
  148. 　　                clearTimeout(t2);
  149. 　　            if(showIndex==lis.length-1)
  150. 　　                showIndex=0;
  151. 　　            else
  152. 　　                showIndex++;
  153. 　　            move1(showIndex);
  154. 　　            bg(showIndex);
  155. 　　            
  156. 　　            
  157. 　　        }
  158. 　　        function Toright(){
  159. 　　            t2=setTimeout(function(){Toright1();},2000);
  160. 　　        }
  161. 　　        
  162. 　　        addEventHaddler(right,"click",function (){
  163. 　　                                        if(t2)
  164. 　　                                            clearTimeout(t2);
  165. 　　                                        Toright1();
  166. 　　                });
  167. 　　        //向左运动
  168. 　　        function Toleft(){
  169. 　　            if(t2)
  170. 　　                clearTimeout(t2);
  171. 　　            if(showIndex==0)
  172. 　　                showIndex=lis.length-1;
  173. 　　            else
  174. 　　                showIndex--;
  175. 　　            move1(showIndex);
  176. 　　            bg(showIndex);
  177. 　　            
  178. 　　        }
  179. 　　        addEventHaddler(left,"click",function (){Toleft();});
  180. 　　        //自动滚动
  181. 　　        t3=setTimeout(function(){Toright();},2000);
  182. 　　        
  183. 　　    </script>
  184. 　　</body>
  185. 　　</html>


代码： 大图TWEEN.rar  




阅读(648) | 评论(0) | 转发(2) |
0

上一篇：JS总结

下一篇：2012-10-08

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6