javascript实现全屏页面滚动效果
更新时间：2021年10月09日 11:11:23 作者：三水汪
这篇文章主要为大家详细介绍了javascript实现全屏页面滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在我读完javaScript DOM之后，对解释型的javaScript脚本语言有了更加深刻的感悟和理解，并使我的javaScript代码更加规范化。
接下来，我们转入今天我要分享的技术性问题：全屏页面实现滚动。
实现的代码很简单，但是发现其中存在的问题就要靠长久的经验、读书阅历、以及程序员丰富的想象力。
先来看看，最后完成的两个效果图，以及console.log打印出来的内容：
1.点击页面2效果，以及打印的结果：
在点击之后，pagelist[this.index].rollCount计时器中打印一串的值为Math.ceil(rollData.num)；5秒后自动执行另外一个计数器清除pagelist[this.index].rollCount计时器。
2.再次点击页面2，以及打印的结果：
在点击之后，会先判断pagelist[this.index].rollCount计时器是否存在，存在则清除；如果已经到达点击对应的页面完后会打印出不执行，并return
具体请看下边例子，具体各种情况已经做出详细说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏翻页效果实现</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;
//给当前的元素定义一个index对象,保存当前元素的下标
navlist[i].index = i;
//以对象声明变量
var rollData = {
num: 0,
target: 0
};
navlist[i].onclick = function () {
//被点击的按钮相对应的页面距离整个页面顶部的距离
rollData.target = pagelist[this.index].offsetTop;
//判断被点击的是否是当前的，是的话就不继续执行
var h = window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight;
var x = this.index;
//判断当前点击的按钮对应的页面是否存在元素属性计时器
if (pagelist[this.index].rollCount) {
console.log("存在");
clearInterval(pagelist[this.index].rollCount);
/*防止连续点击造成直接return致使页面没加载完，因此添加判断来遏制。
*这样即使页面没完全到达，哪怕上边清除后，
*也会继续向下执行计数器pagelist[this.index].rollCount
* */
/*但是发现事情终究不会很完美，需要不断地改进。
*在我和朋友聊天的一瞬间，再次点击了当前页面对应的按钮，
*却发现没有执行下边return.
*再看看计数器中打印的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("不执行");
//如果存在并且滚动条滚动到的数值与当前页面的相等，
//则不向下执行计数器。
return;
}
}
//计时器进行页面滚动
pagelist[this.index].rollCount = setInterval(function () {
//Math.ceil()向大于方向进行舍入
rollData.num = rollData.num +
(rollData.target - rollData.num) / 10;
console.log(Math.ceil(rollData.num));
//1.使滚动条到与h*x的位置， window.scrollTo()
//2.判断被Math.ceil取值后的rollData.num属性在x*h前后值相差绝对值为1的情况
//之所以进行上边的2操作，是因为在打印Math.ceil(rollData.num)值时发现有时
//会和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计数器器
*阻止上边的计数器一直不停地运作
* */
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>
在做完上边的优化之后，发现自己今后还是要多读书，多去开源网站看高手们写的代码，还要不断地发挥自己的想象力去完善自己的代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序日期时间选择器的使用方法，自定义精确到分秒或时段，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
本篇文章主要是对javascript(js)中的小数点乘法除法问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
Bootstrap~多级导航(级联导航)的实现效果【附代码】
下面小编就为大家分享一篇Bootstrap~多级导航(级联导航)的实现效果【附代码】。小编觉得挺不错。希望对大家有所帮助。一起跟随小编过来看看吧2016-03-03
这篇文章主要介绍了通过WebSocket实现异步导出,本篇文章记录大批量数据导出时间过长,导致接口请求超时问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了javascript+html5+css3自定义提示窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了jquery动态添加删除(tr/td)的方法,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了js简单实现标签云效果,基于miaov.js文件实现标签云的3D滚动效果,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JS倒计时两种实现方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
在uniapp中使用axios进行请求时,uniapp无法使用axios的适配器,下面这篇文章主要给大家介绍了关于uniapp封装axios的详细过程,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了JavaScript实现省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
最新评论