標籤：cursor 點擊事件 font 指定 html+css order onclick lin 事件
實現效果示範：
實現代碼及注釋：
<!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>第一地區</li><li>第二地區</li><li>第三地區</li><li>第四地區</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，螢幕滑動到對應的ul的li// 利用window.scrollTo()；緩動動畫實現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 = ["green","orange","yellow","red","gold"];// 利用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;// 迴圈綁定，為每一個li綁定點擊事件olLiArr[i].onclick =function(){// 擷取目標位置target = ulLiArr[this.index].offsetTop;clearInterval(timer);// 利用緩動動畫原理實現螢幕滑動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，類比擷取顯示地區距離頂部的距離leader = scroll().top;}}</script></body></html>
【前端】純html+css+javascript實現樓層跳躍式的頁面配置
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
