javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果
更新時(shí)間：2021年10月09日 11:11:23 作者：三水汪
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在我讀完javaScript DOM之后，對(duì)解釋型的javaScript腳本語(yǔ)言有了更加深刻的感悟和理解，并使我的javaScript代碼更加規(guī)范化。
接下來(lái)，我們轉(zhuǎn)入今天我要分享的技術(shù)性問(wèn)題：全屏頁(yè)面實(shí)現(xiàn)滾動(dòng)。
實(shí)現(xiàn)的代碼很簡(jiǎn)單，但是發(fā)現(xiàn)其中存在的問(wèn)題就要靠長(zhǎng)久的經(jīng)驗(yàn)、讀書(shū)閱歷、以及程序員豐富的想象力。
先來(lái)看看，最后完成的兩個(gè)效果圖，以及console.log打印出來(lái)的內(nèi)容：
1.點(diǎn)擊頁(yè)面2效果，以及打印的結(jié)果：
在點(diǎn)擊之后，pagelist[this.index].rollCount計(jì)時(shí)器中打印一串的值為Math.ceil(rollData.num)；5秒后自動(dòng)執(zhí)行另外一個(gè)計(jì)數(shù)器清除pagelist[this.index].rollCount計(jì)時(shí)器。
2.再次點(diǎn)擊頁(yè)面2，以及打印的結(jié)果：
在點(diǎn)擊之后，會(huì)先判斷pagelist[this.index].rollCount計(jì)時(shí)器是否存在，存在則清除；如果已經(jīng)到達(dá)點(diǎn)擊對(duì)應(yīng)的頁(yè)面完后會(huì)打印出不執(zhí)行，并return
具體請(qǐng)看下邊例子，具體各種情況已經(jīng)做出詳細(xì)說(shuō)明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏翻頁(yè)效果實(shí)現(xiàn)</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
color: #fff;
}
ul {
list-style: none
}
#nav {
position: fixed;
top: 50px;
left: 50px;
}
#nav li {
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
border: 2px solid #fff;
cursor: pointer;
}
#nav li:nth-child(1) {
background: #f60;
}
#nav li:nth-child(2) {
background: #63c;
}
#nav li:nth-child(3) {
background: #3c6;
}
#nav li:nth-child(4) {
background: #f9c;
}
#page {
width: 100%;
height: 100%;
}
#page li {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul id="page">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="nav">
<li>頁(yè)面1</li>
<li>頁(yè)面2</li>
<li>頁(yè)面3</li>
<li>頁(yè)面4</li>
</ul>
<script>
function rollingPage() {
var pageul = document.getElementById("page");
var pagelist = pageul.children;
var navul = document.getElementById("nav");
var navlist = navul.children;
for (i = 0; i < navlist.length; i++) {
//得到全部樣式getComputedStyle
var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
// alert(bgcolor);
pagelist[i].style.background = bgcolor;
//給當(dāng)前的元素定義一個(gè)index對(duì)象,保存當(dāng)前元素的下標(biāo)
navlist[i].index = i;
//以對(duì)象聲明變量
var rollData = {
num: 0,
target: 0
};
navlist[i].onclick = function () {
//被點(diǎn)擊的按鈕相對(duì)應(yīng)的頁(yè)面距離整個(gè)頁(yè)面頂部的距離
rollData.target = pagelist[this.index].offsetTop;
//判斷被點(diǎn)擊的是否是當(dāng)前的，是的話(huà)就不繼續(xù)執(zhí)行
var h = window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight;
var x = this.index;
//判斷當(dāng)前點(diǎn)擊的按鈕對(duì)應(yīng)的頁(yè)面是否存在元素屬性計(jì)時(shí)器
if (pagelist[this.index].rollCount) {
console.log("存在");
clearInterval(pagelist[this.index].rollCount);
/*防止連續(xù)點(diǎn)擊造成直接return致使頁(yè)面沒(méi)加載完，因此添加判斷來(lái)遏制。
*這樣即使頁(yè)面沒(méi)完全到達(dá)，哪怕上邊清除后，
*也會(huì)繼續(xù)向下執(zhí)行計(jì)數(shù)器pagelist[this.index].rollCount
* */
/*但是發(fā)現(xiàn)事情終究不會(huì)很完美，需要不斷地改進(jìn)。
*在我和朋友聊天的一瞬間，再次點(diǎn)擊了當(dāng)前頁(yè)面對(duì)應(yīng)的按鈕，
*卻發(fā)現(xiàn)沒(méi)有執(zhí)行下邊return.
*再看看計(jì)數(shù)器中打印的Math.ceil(rollData.num)的值為1。
*因此加上了Math.ceil(rollData.num) + 1 == h * x ||
*Math.ceil(rollData.num) - 1 == h * x
*
*之所以造成這樣的原因還有就是，
*在 window.scrollTo(0, Math.ceil(rollData.num) + 1)
*以及減一和不加堿的后，保存的值為Math.ceil(rollData.num)未加堿。
* */
if (Math.ceil(rollData.num) + 1 == h * x ||
Math.ceil(rollData.num) - 1 == h * x ||
Math.ceil(rollData.num) == h * x) {
console.log("不執(zhí)行");
//如果存在并且滾動(dòng)條滾動(dòng)到的數(shù)值與當(dāng)前頁(yè)面的相等，
//則不向下執(zhí)行計(jì)數(shù)器。
return;
}
}
//計(jì)時(shí)器進(jìn)行頁(yè)面滾動(dòng)
pagelist[this.index].rollCount = setInterval(function () {
//Math.ceil()向大于方向進(jìn)行舍入
rollData.num = rollData.num +
(rollData.target - rollData.num) / 10;
console.log(Math.ceil(rollData.num));
//1.使?jié)L動(dòng)條到與h*x的位置， window.scrollTo()
//2.判斷被Math.ceil取值后的rollData.num屬性在x*h前后值相差絕對(duì)值為1的情況
//之所以進(jìn)行上邊的2操作，是因?yàn)樵诖蛴ath.ceil(rollData.num)值時(shí)發(fā)現(xiàn)有時(shí)
//會(huì)和x*h前后相差1
if (Math.ceil(rollData.num) + 1 == h * x) {
window.scrollTo(0, Math.ceil(rollData.num) + 1);
} else if (Math.ceil(rollData.num) - 1 == h * x) {
window.scrollTo(0, Math.ceil(rollData.num) - 1);
} else {
window.scrollTo(0, Math.ceil(rollData.num));
}
}, 30);
/*5秒后符合條件的情況下，可清除pagelist[x].rollCount計(jì)數(shù)器器
*阻止上邊的計(jì)數(shù)器一直不停地運(yùn)作
* */
setTimeout(function () {
//五秒后，如果Math.ceil(rollData.num)，以及前后相差1符合條件，
//就清除上邊的計(jì)時(shí)器
if (Math.ceil(rollData.num) + 1 == h * x ||
Math.ceil(rollData.num) - 1 == h * x ||
Math.ceil(rollData.num) == h * x) {
console.log("自動(dòng)清除" + x);
clearInterval(pagelist[x].rollCount);
}
}, 5000);
}
}
}
addLoadEvent(rollingPage);
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
</script>
</body>
</html>
在做完上邊的優(yōu)化之后，發(fā)現(xiàn)自己今后還是要多讀書(shū)，多去開(kāi)源網(wǎng)站看高手們寫(xiě)的代碼，還要不斷地發(fā)揮自己的想象力去完善自己的代碼。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家匯總了2個(gè)JavaScript+css3實(shí)現(xiàn)的時(shí)鐘特效的代碼，非常的漂亮，有需要的小伙伴可以來(lái)參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了JavaScript前端加解密工具庫(kù)（CryptoJS、JSEncrypt、bcryptjs）的具體使用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2023-12-12
JavaScript實(shí)現(xiàn)組件化和模塊化方法詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)組件化和模塊化方法，模塊化主要是指一個(gè)JS文件就是一個(gè)模塊，向外提供特定功能的程序，組件化的中心思想其實(shí)跟模塊化是大同小異的，感興趣想要詳細(xì)了解可以參考下文2023-05-05
解構(gòu)就是將聲明的一組變量和與相同結(jié)構(gòu)的數(shù)組或者對(duì)象的元素?cái)?shù)值一一對(duì)應(yīng)，并將變量相對(duì)應(yīng)元素進(jìn)行賦值。本文將詳細(xì)介紹ECMAScript6--解構(gòu)的相關(guān)知識(shí)。下面跟著小編一起來(lái)看下吧2017-03-03
javascript解析ajax返回的xml和json格式數(shù)據(jù)實(shí)例詳解
這篇文章主要介紹了javascript解析ajax返回的xml和json格式數(shù)據(jù),結(jié)合實(shí)例形式詳細(xì)分析了JS ajax調(diào)用及返回值中xml與json格式數(shù)據(jù)的處理技巧,需要的朋友可以參考下2017-01-01
js獲取頁(yè)面引用的css樣式表中的屬性值方法(推薦)
下面小編就為大家?guī)?lái)一篇js獲取頁(yè)面引用的css樣式表中的屬性值方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤(pán)
這篇文章主要為大家詳細(xì)介紹了JS+Canvas繪制抽獎(jiǎng)轉(zhuǎn)盤(pán)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
解決使用layui對(duì)select append元素?zé)o效或者未及時(shí)更新的問(wèn)題
今天小編就為大家分享一篇解決使用layui對(duì)select append元素?zé)o效或者未及時(shí)更新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果的代碼示例
這篇文章主要介紹了如何用Canvas實(shí)現(xiàn)動(dòng)態(tài)粒子文字效果,文中有完整的代碼示例,文章通過(guò)代碼介紹的非常清楚,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08
以前需要做一個(gè)數(shù)字輸入的InputBox,結(jié)果無(wú)奈需求太BT，搞得焦頭爛額，重做了無(wú)數(shù)次。無(wú)奈之下，再次Google，發(fā)現(xiàn)早有成熟的插件了(悶在家里造輪子果然不好啊)，autoNumeric使用方便，功能強(qiáng)大，現(xiàn)在介紹給大家，一個(gè)非常好的jquery plugin。2009-11-11