脚本宝典收集整理的这篇文章主要介绍了js實例教程-JS樓層跳躍代碼實現，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。
JS樓層跳躍代碼實現
<!DOCTYPE htML> <html> <head lang="en"> <;meta charset="UTF-8"> <tITle></title> <style> * { margin: 0; padding: 0; } body,html { height: 100%; } ul { list-style: none; height: 100%; } ul li { height: 100%; } ol { list-style: none; position: fixed; top: 80px; left: 50px; } ol li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; } </style> </head> <body> <ul> <li>鞋子區域</li> <li>襪子區域</li> <li>褲子區域</li> <li>裙子區域</li> <li>帽子區域</li> </ul> <ol> <li>鞋子</li> <li>襪子</li> <li>褲子</li> <li>裙子</li> <li>帽子</li> </ol> <script src="aniMATE.js"></script> <script> //需求：點擊ol中的li，屏幕滑動到對應的ul中的li的範圍。 //思路：還是利用window.scrollTo();利用緩動動畫原理實現屏幕滑動。 //步驟： //0.獲取元素 //1.指定ul和ol中的li的背景色，對應的li背景色相同 //2.老三步。(獲取元素並綁定事件) //3.利用緩動動畫原理實現屏幕滑動 //4.用scroll事件模擬盒子距離最頂端的距離。 //0.獲取元素 VAR ul = document.getelementsbytagname("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; var ulLiArr = ul.children; var olLiArr = ol.children; var target = 0;var leader = 0;var timer = null; //1.指定ul和ol中的li的背景色，對應的li背景色相同 //設置一個數組，裡面裝顏色，然指定的顏色給數組中的指定元素 var arrColor = ["pink","blue","yellow","orange","green"]; //利用for循環給兩個數組的元素上色 for(var i=0;i<arrColor.length;i++){ //上色 ulLiArr[i].style.backgroundColor = arrColor[i]; olLiArr[i].style.backgroundColor = arrColor[i]; //屬性綁定索引值 olLiArr[i].index = i; //2.老三步。(並綁定事件)循環綁定，為每一個li綁定點擊事件 olLiArr[i].onclick = function () { //***獲取目標位置 //獲取索引值。 target = ulLiArr[this.index].offsetTop; //要用定時器，先清除定時器 clearInterval(timer); //3.利用緩動動畫原理實現屏幕滑動 timer = setInterval(function () { //(1).獲取步長 var step = (target-leader)/10; //(2).二次處理步長 step = step>0?Math.ceil(step):Math.floor(step); //(3).屏幕滑動 leader = leader + step; window.scrollTo(0,leader); //(4).清除定時器 if(Math.abs(target-leader)<=Math.abs(step)){ window.scrollTo(0,target); clearInterval(timer); } },25); } } //4.用scroll事件模擬盒子距離最頂端的距離。 window.onscroll = function () { //每次屏幕滑動，把屏幕捲去的頭部賦值給leader,模擬獲取顯示區域距離頂部的距離 leader = scroll().top; } </script> </body> </html>
JS樓層跳躍代碼實現
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body,html { height: 100%; } ul { list-style: none; height: 100%; } ul li { height: 100%; } ol { list-style: none; position: fixed; top: 80px; left: 50px; } ol li { width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; } </style> </head> <body> <ul> <li>鞋子區域</li> <li>襪子區域</li> <li>褲子區域</li> <li>裙子區域</li> <li>帽子區域</li> </ul> <ol> <li>鞋子</li> <li>襪子</li> <li>褲子</li> <li>裙子</li> <li>帽子</li> </ol> <script src="animate.js"></script> <script> //需求：點擊ol中的li，屏幕滑動到對應的ul中的li的範圍。 //思路：還是利用window.scrollTo();利用緩動動畫原理實現屏幕滑動。 //步驟： //0.獲取元素 //1.指定ul和ol中的li的背景色，對應的li背景色相同 //2.老三步。(獲取元素並綁定事件) //3.利用緩動動畫原理實現屏幕滑動 //4.用scroll事件模擬盒子距離最頂端的距離。 //0.獲取元素 var ul = document.getElementsByTagName("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; var ulLiArr = ul.children; var olLiArr = ol.children; var target = 0;var leader = 0;var timer = null; //1.指定ul和ol中的li的背景色，對應的li背景色相同 //設置一個數組，裡面裝顏色，然指定的顏色給數組中的指定元素 var arrColor = ["pink","blue","yellow","orange","green"]; //利用for循環給兩個數組的元素上色 for(var i=0;i<arrColor.length;i++){ //上色 ulLiArr[i].style.backgroundColor = arrColor[i]; olLiArr[i].style.backgroundColor = arrColor[i]; //屬性綁定索引值 olLiArr[i].index = i; //2.老三步。(並綁定事件)循環綁定，為每一個li綁定點擊事件 olLiArr[i].onclick = function () { //***獲取目標位置 //獲取索引值。 target = ulLiArr[this.index].offsetTop; //要用定時器，先清除定時器 clearInterval(timer); //3.利用緩動動畫原理實現屏幕滑動 timer = setInterval(function () { //(1).獲取步長 var step = (target-leader)/10; //(2).二次處理步長 step = step>0?Math.ceil(step):Math.floor(step); //(3).屏幕滑動 leader = leader + step; window.scrollTo(0,leader); //(4).清除定時器 if(Math.abs(target-leader)<=Math.abs(step)){ window.scrollTo(0,target); clearInterval(timer); } },25); } } //4.用scroll事件模擬盒子距離最頂端的距離。 window.onscroll = function () { //每次屏幕滑動，把屏幕捲去的頭部賦值給leader,模擬獲取顯示區域距離頂部的距離 leader = scroll().top; } </script> </body> </html> 覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！
以上是脚本宝典为你收集整理的js實例教程-JS樓層跳躍代碼實現全部内容，希望文章能够帮你解决js實例教程-JS樓層跳躍代碼實現所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。