當我們瀏覽網頁的時候，時常會碰到可以滾動屏幕的炫酷網頁，今天筆者對這一技術進行簡單實現，效果不及讀者理想中那般炫酷，主要針對滾屏的技術原理和思想進行分享和分析。本示例在頁面右側有五個數字標簽，代表五個頁面，點擊數字可以切換到對應的頁面，滾動鼠標滑輪可以實現數字標簽的切換，頁面的切換。筆者未對頁面的平穩滾動進行實現，讀者可自行試驗研究。
這是html代碼：
<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="big-box" id="bigBox"> <div class="item item1"><h1>屏幕1</h1></div> <div class="item item2"><h1>屏幕2</h1></div> <div class="item item3"><h1>屏幕3</h1></div> <div class="item item4"><h1>屏幕4</h1></div> <div class="item item5"><h1>屏幕5</h1></div> </div> <ul class="controls"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script src="behavior.js"></script> </body></html>
這里是css結構代碼：
*{margin:0; padding:0;}html,body{ width:100%; height:100%; overflow:hidden;}.big-box { width:100%; height:500%; text-align:center; position:absolute;}.big-box .item{ height:20%;}.big-box .item1 { background-color:red;}.big-box .item2 { background-color:blue;}.big-box .item3 { background-color:purple;}.big-box .item4 { background-color:gold;}.big-box .item5 { background-color:pink;}.controls { list-style:none; position:absolute; top:20%; right:20px;}.controls li { width:50px; height:50px; font:bold 22px/50px "宋體"; text-align:center; background-color:#000; color:#fff; cursor:pointer;}.controls li+li { margin-top:5px;}.controls li.active { background-color:#fff; color:red;}這里是JavaScript代碼：
/* 思路： 第一步：當頁面加載完后，獲取所要操作的節對象 第二步：為document添加一個滾輪滾動事件 第三步：滾輪滾動切換 獲取當前瀏覽器可視區域的高度 var viewHeight = document.body.clientHeight 滾輪切換的目的：就是更改bigBox的top值 top:最大0 top:最小 viewHeight*-4 從上到下或從下到上：最多走4次(5個頁面) 每一次走viewHeight 控制的關鍵點：索引 定一個索引 2 滾輪↓ 索引+1 滾輪↑ 索引-1 bigBox.style.top = -索引*viewHeihgt */var bigBox = document.getElementById("bigBox");//獲取bigBox節點對象var lis = document.querySelectorAll(".controls li");//獲取所有的li節點對象var viewHeight = document.body.clientHeight;//獲取當前頁面高度var flag = true;//設置開關var index = 0;//設置索引//封裝事件,兼容瀏覽器function on(obj,eventType,fn){ if(obj.addEventListener){ obj.addEventListener(eventType, fn); }else{ obj.attachEvent("on" + eventType, fn); }}//鼠標滾動事件處理函數function handler(e){ var _e = window.event || e; if(flag){ flag = false; if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠標滾輪向上滾動，detail為火狐判斷條件 index--; if(index<0){ index = 0; } }else{//向下滾動 index++; if(index>lis.length-1){//如果索引大于頁面數，就是滾到最后一張頁面時，再滾動鼠標頁面不再滾動 index = lis.length-1; } } bigBox.style.top = -index*viewHeight + "px";//bigBox整體上移index個頁面 for(var i=0; i<lis.length; i++){ lis[i].className = "";//重置全部li的類 } lis[index].className = "active";//設置當前li的類名 setTimeout(function(){//頁面滾動間隔一秒，防止滾動太快 flag = true;//重新開啟開關 },1000); }}on(document,"mousewheel",handler);//滾輪滾動事件on(document,"DOMMouseScroll",handler);//滾輪滾動事件，適配火狐瀏覽器//數字標簽點擊處理for(var i=0; i<lis.length; i++){ lis[i].tag = i; lis[i].onclick = function(){ for(var j=0; j<lis.length; j++){ lis[j].className = ""; } lis[this.tag].className = "active"; bigBox.style.top = -this.tag*viewHeight + "px"; }}筆者在這里進行了html，css和javascript的分離，讀者可自行整合。代碼編寫的邏輯思路也在代碼中進行了簡單說明，方便讀者閱讀和理解。筆者在這里只是對滾屏技術進行簡單的實現，純javascript技術，效果稍欠人意，讀者可自行學習，對這一技術進行完美實現。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
