實現(xiàn)效果演示：
實現(xiàn)代碼及注釋：
<!DOCTYPE html><html><head> <title>樓層跳躍式的頁面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ 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:200px; 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>第一區(qū)域</li> <li>第二區(qū)域</li> <li>第三區(qū)域</li> <li>第四區(qū)域</li></ul><ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ol><script type="text/javascript" src="myScroll.js"></script><script type="text/javascript"> // 點擊ol的li，屏幕滑動到對應(yīng)的ul的li // 利用window.scrollTo()；緩動動畫實現(xiàn) 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中l(wèi)i的背景色，對應(yīng)li的背景色相同 var arrColor = ["green","orange","yellow","red","gold"]; // 利用for循環(huán)給兩個數(shù)組中的元素上色 for(var i=0; i<arrColor.length; i++){ ulLiArr[i].style.backgroundColor = arrColor[i]; olLiArr[i].style.backgroundColor = arrColor[i]; // 屬性綁定索引值 olLiArr[i].index = i; // 循環(huán)綁定，為每一個li綁定點擊事件 olLiArr[i].onclick =function(){ // 獲取目標(biāo)位置 target = ulLiArr[this.index].offsetTop; clearInterval(timer); // 利用緩動動畫原理實現(xiàn)屏幕滑動 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); } // 用scroll事件模擬盒子距離最頂端的距離 window.onscroll = function(){ // 每次屏幕滑動，把屏幕卷去的值賦給leader，模擬獲取顯示區(qū)域距離頂部的距離 leader = scroll().top; } }</script></body></html>myScroll.js
function scroll() { // 開始封裝自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本瀏覽器 // 因為 window.pageYOffset 默認(rèn)的是0,所以需要判斷 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 標(biāo)準(zhǔn)瀏覽器,來判斷有沒有聲明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未聲明 DTD left: document.body.scrollLeft, top: document.body.scrollTop }} 總結(jié)
以上所述是小編給大家介紹的純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局（實例代碼），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
