欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

在舒蘭等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計制作定制網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計,全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站制作,舒蘭網(wǎng)站建設(shè)費用合理。

這是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結(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)鍵點：索引 定一個索引 2
  滾輪↓
  索引+1
  滾輪↑
  索引-1
  bigBox.style.top = -索引*viewHeihgt 
*/
var bigBox = document.getElementById("bigBox");//獲取bigBox節(jié)點對象
var lis = document.querySelectorAll(".controls li");//獲取所有的li節(jié)點對象
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)簽點擊處理
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)行簡單的實現(xiàn)，純javascript技術(shù)，效果稍欠人意，讀者可自行學(xué)習(xí)，對這一技術(shù)進(jìn)行完美實現(xiàn)。

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

網(wǎng)站欄目：javascript實現(xiàn)頁面滾屏效果
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article28/jsigcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、微信小程序、App設(shè)計、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司