大圖滾動+tween算法

原創 zhanfeng0102 2018-09-11 02:47

 這兩天剛學了大圖滾動和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. }); 
大圖滾動代碼：
 
  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> 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

編寫自適應高度的 textarea

CarterLi 2019-02-25 00:14:46

node遇上c++ --- 愛情來的太快(一) (沒有文章)

sewerganger 2019-02-24 22:55:07

進擊webpack4 （基礎篇二：配置）

槐破夢 2019-02-24 22:55:07

《劍指offer》分解讓複雜問題更簡單

ConardLi 2019-02-24 22:55:07

ggit (git gui) --- 開發記錄 (一)

sewerganger 2019-02-24 22:45:04

搞搞, 超星爾雅；

sewerganger 2019-02-24 22:44:54

近期前端發展計劃

Ashleysweetie 2019-02-24 22:32:41

JS module的導出和導入

KevinYan 2019-02-24 21:34:55

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

micherwa 2019-02-24 19:55:05

跨域的四種方式

上帝遺忘之子 2019-02-24 19:14:58

JS面試題之比較兩個對象是否相等？

幸福村的碼農 2019-02-24 17:35:07

JavaScript：函數防抖與函數節流

沉靜地閃光 2019-02-24 17:35:07

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

通信類

Ashleysweetie 2019-02-24 16:25:14