當(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)研究。
在舒蘭等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作定制網(wǎng)站建設(shè),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)營(yíng)銷推廣,外貿(mào)網(wǎng)站制作,舒蘭網(wǎng)站建設(shè)費(fèi)用合理。
這是html代碼：
Document 屏幕1
屏幕2
屏幕3
屏幕4
屏幕5
這里是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筆者在這里進(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í)也希望多多支持創(chuàng)新互聯(lián)！
