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