快捷導(dǎo)航

javascript實(shí)現(xiàn)頁面滾屏效果

更新時間：2017年01月17日 16:02:42 作者：依然仰望

本文主要介紹了javascript實(shí)現(xiàn)頁面滾屏效果的方法，具有一定的參考價值，下面跟著小編一起來看下吧

當(dāng)我們?yōu)g覽網(wǎng)頁的時候，時常會碰到可以滾動屏幕的炫酷網(wǎng)頁，今天筆者對這一技術(shù)進(jìn)行簡單實(shí)現(xiàn)，效果不及讀者理想中那般炫酷，主要針對滾屏的技術(shù)原理和思想進(jìn)行分享和分析。本示例在頁面右側(cè)有五個數(shù)字標(biāo)簽，代表五個頁面，點(diǎn)擊數(shù)字可以切換到對應(yīng)的頁面，滾動鼠標(biāo)滑輪可以實(shí)現(xiàn)數(shù)字標(biāo)簽的切換，頁面的切換。筆者未對頁面的平穩(wěn)滾動進(jìn)行實(shí)現(xiàn)，讀者可自行試驗(yàn)研究。

這是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結(jié)構(gòu)代碼：

*{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代碼：

/*
 思路：
 第一步：當(dāng)頁面加載完后，獲取所要操作的節(jié)對象
 第二步：為document添加一個滾輪滾動事件
 第三步：滾輪滾動切換
  獲取當(dāng)前瀏覽器可視區(qū)域的高度
  var viewHeight = document.body.clientHeight
  滾輪切換的目的：就是更改bigBox的top值
  top:最大0
  top:最小 viewHeight*-4
  從上到下或從下到上：最多走4次(5個頁面) 每一次走viewHeight
  控制的關(guān)鍵點(diǎn)：索引 定一個索引 2
  滾輪↓
  索引+1
  滾輪↑
  索引-1
  bigBox.style.top = -索引*viewHeihgt 
*/
var bigBox = document.getElementById("bigBox");//獲取bigBox節(jié)點(diǎn)對象
var lis = document.querySelectorAll(".controls li");//獲取所有的li節(jié)點(diǎn)對象
var viewHeight = document.body.clientHeight;//獲取當(dāng)前頁面高度
var flag = true;//設(shè)置開關(guān)
var index = 0;//設(shè)置索引
//封裝事件,兼容瀏覽器
function on(obj,eventType,fn){
 if(obj.addEventListener){
 obj.addEventListener(eventType, fn);
 }else{
 obj.attachEvent("on" + eventType, fn);
 }
}
//鼠標(biāo)滾動事件處理函數(shù)
function handler(e){
 var _e = window.event || e;
 if(flag){
 flag = false;
 if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠標(biāo)滾輪向上滾動，detail為火狐判斷條件
  index--;
  if(index<0){
  index = 0;
  }
 }else{//向下滾動
  index++;
  if(index>lis.length-1){//如果索引大于頁面數(shù)，就是滾到最后一張頁面時，再滾動鼠標(biāo)頁面不再滾動
  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";//設(shè)置當(dāng)前l(fā)i的類名
 setTimeout(function(){//頁面滾動間隔一秒，防止?jié)L動太快
  flag = true;//重新開啟開關(guān)
 },1000);
 }
}
on(document,"mousewheel",handler);//滾輪滾動事件
on(document,"DOMMouseScroll",handler);//滾輪滾動事件，適配火狐瀏覽器
//數(shù)字標(biāo)簽點(diǎn)擊處理
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";
 }
}

筆者在這里進(jìn)行了html，css和javascript的分離，讀者可自行整合。代碼編寫的邏輯思路也在代碼中進(jìn)行了簡單說明，方便讀者閱讀和理解。筆者在這里只是對滾屏技術(shù)進(jìn)行簡單的實(shí)現(xiàn)，純javascript技術(shù)，效果稍欠人意，讀者可自行學(xué)習(xí)，對這一技術(shù)進(jìn)行完美實(shí)現(xiàn)。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: