滑動門

原創 zhanfeng0102 2019-02-22 22:37

 很榮幸老師給了我一天的時間讓我把滑動門這個效果當作一節課來講，感覺收穫很多，知道如何能更容易的讓大家接受你的思想。講課的過程：1.效果2.思路3.代碼4.難點，從這4個方面入手的。其中第三步佔據了主要的時間，第三步類似與Tab切換的5種方法，有最簡單的不可以複用的方法講起，到最後比較精簡。

1.思路

1.第一步弄清楚如何佈局，知道每張圖片的left值。每張圖片的起點和終點在哪，有如何聯繫，怎麼表示它的起點和終點。

2.寫一個運動函數moveTo，傳入起點和終點就可以從起點運動到終點。

2.兩個調用moveTo的函數A,B：一個向左運動，一個向右運動.

3.一個判斷函數，判斷哪些圖片向左運動，那些向右運動，然後分別的調用函數A和B.

2.代碼

1.佈局讓每張圖片到該到的位置

function layout(){}

2.運動函數知道終點起點，從起點運動到終點，s:起點e:終點，callback回調函數

function moveTo(s,e,callback1){}

3.圖片向右運動函數

function mover(i){}

4.圖片向左運動函數

function movel(i){}

5.判斷函數，圖片是該向左運動還是向右運動

function judge(){}

代碼如下：

 

  1. <style> 
  2.         #outer{height:200px;width:600px;margin:100px auto;overflow:hidden;position:relative;} 
  3.         img{height:200px;width:300px;position:absolute;} 
  4. </style> 
  5.  
  6. <body onload='layout();'> 
  7.     <div id='outer'> 
  8.         <table cellpadding=0 cellspacing=0> 
  9.             <tr> 
  10.                 <td><img src='1.jpg' alt=''></td> 
  11.                 <td><img src='2.jpg' alt=''></td> 
  12.                 <td><img src='3.jpg' alt=''></td> 
  13.                 <td><img src='4.jpg' alt=''></td> 
  14.             </tr>    
  15.         </table> 
  16.     </div> 
  17.     <script> 
  18.         var img_num=document.p_w_picpaths.length;//獲取圖片的數量 
  19.         var outer=document.getElementById('outer'); 
  20.         var outer_css=document.defaultView.getComputedStyle(outer,null);//爲獲取標籤outer的css樣式 
  21.         var outer_w=parseInt(outer_css.width);//outer的寬度不帶px 
  22.         var img_w=document.p_w_picpaths[0].width;//圖片的寬度不帶px 
  23.         var surplus_w=outer_w-img_w;//outer-一張圖片的寬度剩餘的寬度 
  24.         var average_w=surplus_w/(img_num-1);//其餘圖片每張的佔得寬度 
  25.         //佈局讓每張圖片到改到的位置 
  26.         function layout(){ 
  27.             document.p_w_picpaths[0].style.left=surplus_w+'px'; 
  28.             addEventHaddler(document.p_w_picpaths[0],'click',judge); 
  29.             for(var i=1;i<img_num;i++){ 
  30.                 document.p_w_picpaths[i].style.left=surplus_w-(i-1)*average_w-img_w+'px'; 
  31.                 addEventHaddler(document.p_w_picpaths[i],'click',judge); 
  32.             }        
  33.         } 
  34.          
  35.         //事件監聽器 
  36.         function addEventHaddler(target,type,func){ 
  37.             if(target.addEventListener) 
  38.                 target.addEventListener(type,func,false); 
  39.             else if(target.attachEvent) 
  40.                 target.attachEvent("on"+type,func); 
  41.             else 
  42.                 target["on"+type]=func; 
  43.         } 
  44.         function removeEventHaddler(target,type,func){ 
  45.             if(target.removeEventListener) 
  46.                 target.removeEventListenner(target,type,func); 
  47.             else if(target.detachEvent) 
  48.                 target.detachEvent("on"+type,func); 
  49.             else 
  50.                 delete target["on"+type];                        
  51.         } 
  52.         //Tween算法 
  53.         var Tween = { 
  54.             Cubic: { 
  55.                 easeIn: function(t,b,c,d){ 
  56.                     return c*(t/=d)*t*t + b; 
  57.                 }, 
  58.                 easeOut: function(t,b,c,d){ 
  59.                     return c*((t=t/d-1)*t*t + 1) + b; 
  60.                 }, 
  61.                 easeInOut: function(t,b,c,d){ 
  62.                     if ((t/=d/2) < 1) return c/2*t*t*t + b; 
  63.                     return c/2*((t-=2)*t*t + 2) + b; 
  64.                 } 
  65.             } 
  66.         } 
  67.         //運動函數知道終點起點，從起點運動到終點，s:起點e:終點，callback回調函數 
  68.         var d;//Tween算法需要幾步完成，現在是需要30步完成 
  69.         var t1;//計時器 
  70.         function moveTo(s,e,callback1){          
  71.             var t=0;//實際走的的步數 
  72.             var b=s//起始位置 
  73.             var c=e-s;//變化量 
  74.             var x;//例如給left賦值用的參數 
  75.             function move(){ 
  76.                 if(t==d){ 
  77.                     clearTimeout(t1); 
  78.                 } 
  79.                 else{ 
  80.                     t++; 
  81.                     x=Tween.Cubic.easeIn(t,b,c,d); 
  82.                     callback1(x); 
  83.                     t1=setTimeout(move,17); 
  84.                 } 
  85.              
  86.             } 
  87.         move();      
  88.         } 
  89.         //圖片向右運動函數 
  90.         function mover(i){ 
  91.             d=15; 
  92.             moveTo(parseInt(document.p_w_picpaths[i].style.left),surplus_w-i*average_w,function (x){document.p_w_picpaths[i].style.left=x+'px';}); 
  93.             //終點是最左邊的位置不是最右邊的位置 
  94.         } 
  95.         //圖片向左運動函數 
  96.         function movel(i){ 
  97.             d=10; 
  98.             moveTo(parseInt(document.p_w_picpaths[i].style.left),surplus_w-(i-1)*average_w-img_w,function (x){document.p_w_picpaths[i].style.left=x+'px';}); 
  99.         } 
  100.         //判斷函數，圖片是該向左運動還是向右運動 
  101.         var overall_num;//全局變量，來查看點擊的是第幾張 
  102.         function judge(){ 
  103.             for(var i=0;i<img_num;i++){ 
  104.                 if(this==document.p_w_picpaths[i]) 
  105.                     overall_num=i                    
  106.             } 
  107.             //  判斷那些圖片該向右運動，那些該向左運動 
  108.             for(var i=0;i<img_num;i++){ 
  109.                 //圖片在點擊的右邊就要都向右運動包含被點擊的那一張,其餘的向左運動 
  110.                 if(i<=overall_num){ 
  111.                     mover(i); 
  112.                 } 
  113.                 else{ 
  114.                     movel(i); 
  115.                 } 
  116.             } 
  117.  
  118.         } 
  119.         //調用佈局函數在body裏面 
  120.          
  121.     </script> 
  122. </body> 
  123. 　　 

 

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

第二十二章：動畫（四）

wangccsy 2019-02-24 10:57:10

json

yi_sixian 2019-02-23 14:02:01

html2canvas實現保存網頁爲圖片，canvas2image解決圖片模糊問題

wx5c6f5798d627c 2019-02-23 13:07:16

序列化表單爲Json對象

liudajiang 2019-02-23 12:53:51

Console.log 的兼容性

liudajiang 2019-02-23 12:53:51

對frameset、frame、iframe的js操作

dyfhyf 2019-02-23 00:32:13

零基礎實現網易雲音樂播放器（3）

麪包理想 2019-02-23 00:25:45

jQuery.validate.js API

weiyongliang813 2019-02-23 00:25:04

JS推送指定欄目摺疊效果（實例）

super748 2019-02-23 00:23:46

圖片懶加載

motouzhixin 2019-02-23 00:20:39

js正則表達式

kouxiaomou 2019-02-23 00:20:05

js函數傳值ie下的bug

yujie001 2019-02-23 00:19:00

js筆記

00_yatou 2019-02-23 00:16:07

Js中的window.parent ,window.top,window.self詳解

itso310 2019-02-23 00:14:32

js 事件綁定的方法

tutu2 2019-02-23 00:14:28