原生js实现楼层滚动（界面滑动）效果

截取自自己写的代码

思路很简单，就是改编自回到顶部效果，控制滚动条位移到指定位置

先有个布局，四个触发li和四张图片

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>Page Title</title>     <style>         #center{             position:fixed;             top:400px;             right:600px;         }     </style> </head> <body>     <div id="center">         <lu>                                            <li> Expose</li>                 <li> jsPDF</li>                 <li> BaySentry</li>                 <li> vtop</li>         </lu>     </div>     <div id="right-img">             <div class="right-img-img">                 <a href="#">                     <img src="https://parallax-test-2.imgix.net/uploads/download/20161220143400_expose.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">                 </a>                         </div>                           <div class="right-img-img">                 <a href="#">                     <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144443_jspdf.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">                 </a>                                        </div>             <div class="right-img-img">                 <a href="#">                     <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144253_baysentry.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">                 </a>                           </div>             <div class="right-img-img">                 <a href="#">                     <img src="https://parallax-test-2.imgix.net/uploads/download/20161220144157_vtop.png?auto=format%252Ccompress&w=1370&h=900&ixlib=imgixjs-3.0.4" class="Img">                 </a>             </div>         </div> </body> </html>

下面是实现效果的js代码

            var isTop = true;               var aCenterLi = document.getElementsByTagName("li");  //使用时记得修改所选范围             //运动框架             function startMove(obj,json,times,endfn){                            clearInterval(obj.timer);             obj.timer=setInterval(function(){                 var iFlag=true;//假设所有运动都到达目标                 for(var attr in json){                          //1.取当前值                 var icur=0;                 attr=='opacity'? icur=Math.round(parseFloat(getStyle(obj,attr))*100) : icur=Math.round(getStyle(obj,attr).replace("px",""));                 //2.计算速度                 var speed=(json[attr]-icur)/times;                 speed=speed>0?Math.ceil(speed):Math.floor(speed);                 //3.检测停止                 if(icur-json[attr]>1||icur-json[attr]<-1){                     iFlag=false;                 }                 if(attr=='opacity'){                         obj.style.filter='alpha(opacity:'+icur+speed+')';                         obj.style.opacity=(icur+speed)/100;                     }else{                         obj.style[attr]=icur+speed+'px';                     }                                     }                 if(iFlag){                     clearInterval(obj.timer);                     endfn && endfn.apply(obj);                 }             },30)                  }         function getStyle (obj,attr){ return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]; }         //滚动条运动         function movescroll(obj,y){             for (let l = 0; l < aCenterLi.length; l++) {                  clearInterval(aCenterLi[l].timer5);  //清除上一个效果                 }                      obj.timer5 = setInterval(function() {                         var osTop = document.documentElement.scrollTop || document.body.scrollTop;                 var speed2=(y - osTop)/4;   //计算速度                 speed2 = speed2 > 0 ? Math.ceil(speed2):Math.floor(speed2);                  document.documentElement.scrollTop = osTop + speed2;                   isTop = true;                        if (speed2 == 0) {                     for (let l = 0; l < aCenterLi.length; l++) {                      clearInterval(aCenterLi[l].timer5);    //结束后关闭定时器                     }                            }                }, 30);         }         window.onscroll = function() {          scrollTop = document.documentElement.scrollTop || document.body.scrollTop;         if (!isTop) { 			for (let l = 0; l < aCenterLi.length; l++) {                  clearInterval(aCenterLi[l].timer5);    //移动滚动条则停止之前运动，避免bug                 }          		} 		isTop = false;               }         for (let l = 0; l < aCenterLi.length; l++) {              aCenterLi[l].onmouseover = function(){                 movescroll(aCenterLi[l],(l * 900))   //规定移动到的距离          }              }