溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹javascript如何實現(xiàn)全屏頁面滾動效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
今天我要分享的技術(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ù)器一直不停地運作
* */
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>關(guān)于javascript如何實現(xiàn)全屏頁面滾動效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼