溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
當我們瀏覽網頁的時候，時常會碰到可以滾動屏幕的炫酷網頁，今天筆者對這一技術進行簡單實現，效果不及讀者理想中那般炫酷，主要針對滾屏的技術原理和思想進行分享和分析。本示例在頁面右側有五個數字標簽，代表五個頁面，點擊數字可以切換到對應的頁面，滾動鼠標滑輪可以實現數字標簽的切換，頁面的切換。筆者未對頁面的平穩滾動進行實現，讀者可自行試驗研究。
這是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"><h2>屏幕1</h2></div> <div class="item item2"><h2>屏幕2</h2></div> <div class="item item3"><h2>屏幕3</h2></div> <div class="item item4"><h2>屏幕4</h2></div> <div class="item item5"><h2>屏幕5</h2></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技術，效果稍欠人意，讀者可自行學習，對這一技術進行完美實現。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
