快捷導(dǎo)航

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

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

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

當(dāng)我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候，時(shí)常會(huì)碰到可以滾動(dòng)屏幕的炫酷網(wǎng)頁(yè)，今天筆者對(duì)這一技術(shù)進(jìn)行簡(jiǎn)單實(shí)現(xiàn)，效果不及讀者理想中那般炫酷，主要針對(duì)滾屏的技術(shù)原理和思想進(jìn)行分享和分析。本示例在頁(yè)面右側(cè)有五個(gè)數(shù)字標(biāo)簽，代表五個(gè)頁(yè)面，點(diǎn)擊數(shù)字可以切換到對(duì)應(yīng)的頁(yè)面，滾動(dòng)鼠標(biāo)滑輪可以實(shí)現(xiàn)數(shù)字標(biāo)簽的切換，頁(yè)面的切換。筆者未對(duì)頁(yè)面的平穩(wěn)滾動(dòng)進(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)頁(yè)面加載完后，獲取所要操作的節(jié)對(duì)象
 第二步：為document添加一個(gè)滾輪滾動(dòng)事件
 第三步：滾輪滾動(dòng)切換
  獲取當(dāng)前瀏覽器可視區(qū)域的高度
  var viewHeight = document.body.clientHeight
  滾輪切換的目的：就是更改bigBox的top值
  top:最大0
  top:最小 viewHeight*-4
  從上到下或從下到上：最多走4次(5個(gè)頁(yè)面) 每一次走viewHeight
  控制的關(guān)鍵點(diǎn)：索引 定一個(gè)索引 2
  滾輪↓
  索引+1
  滾輪↑
  索引-1
  bigBox.style.top = -索引*viewHeihgt 
*/
var bigBox = document.getElementById("bigBox");//獲取bigBox節(jié)點(diǎn)對(duì)象
var lis = document.querySelectorAll(".controls li");//獲取所有的li節(jié)點(diǎn)對(duì)象
var viewHeight = document.body.clientHeight;//獲取當(dāng)前頁(yè)面高度
var flag = true;//設(shè)置開(kāi)關(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)滾動(dòng)事件處理函數(shù)
function handler(e){
 var _e = window.event || e;
 if(flag){
 flag = false;
 if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠標(biāo)滾輪向上滾動(dòng)，detail為火狐判斷條件
  index--;
  if(index<0){
  index = 0;
  }
 }else{//向下滾動(dòng)
  index++;
  if(index>lis.length-1){//如果索引大于頁(yè)面數(shù)，就是滾到最后一張頁(yè)面時(shí)，再滾動(dòng)鼠標(biāo)頁(yè)面不再滾動(dòng)
  index = lis.length-1;
  }
 }
 bigBox.style.top = -index*viewHeight + "px";//bigBox整體上移index個(gè)頁(yè)面
 for(var i=0; i<lis.length; i++){
  lis[i].className = "";//重置全部li的類(lèi)
 }
 lis[index].className = "active";//設(shè)置當(dāng)前l(fā)i的類(lèi)名
 setTimeout(function(){//頁(yè)面滾動(dòng)間隔一秒，防止?jié)L動(dòng)太快
  flag = true;//重新開(kāi)啟開(kāi)關(guān)
 },1000);
 }
}
on(document,"mousewheel",handler);//滾輪滾動(dòng)事件
on(document,"DOMMouseScroll",handler);//滾輪滾動(dòng)事件，適配火狐瀏覽器
//數(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的分離，讀者可自行整合。代碼編寫(xiě)的邏輯思路也在代碼中進(jìn)行了簡(jiǎn)單說(shuō)明，方便讀者閱讀和理解。筆者在這里只是對(duì)滾屏技術(shù)進(jìn)行簡(jiǎn)單的實(shí)現(xiàn)，純javascript技術(shù)，效果稍欠人意，讀者可自行學(xué)習(xí)，對(duì)這一技術(shù)進(jìn)行完美實(shí)現(xiàn)。

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

您可能感興趣的文章: