滑动门

原創 zhanfeng0102 2018-09-11 02:47

 很荣幸老师给了我一天的时间让我把滑动门这个效果当作一节课来讲，感觉收获很多，知道如何能更容易的让大家接受你的思想。讲课的过程：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.images.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.images[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.images[0].style.left=surplus_w+'px'; 
  28.             addEventHaddler(document.images[0],'click',judge); 
  29.             for(var i=1;i<img_num;i++){ 
  30.                 document.images[i].style.left=surplus_w-(i-1)*average_w-img_w+'px'; 
  31.                 addEventHaddler(document.images[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.images[i].style.left),surplus_w-i*average_w,function (x){document.images[i].style.left=x+'px';}); 
  93.             //终点是最左边的位置不是最右边的位置 
  94.         } 
  95.         //图片向左运动函数 
  96.         function movel(i){ 
  97.             d=10; 
  98.             moveTo(parseInt(document.images[i].style.left),surplus_w-(i-1)*average_w-img_w,function (x){document.images[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.images[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. 　　 

 

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

编写自适应高度的 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