javascript实现全屏页面滚动效果 javascript实现全屏页面滚动效果

【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
具体请看下边例子，具体各种情况已经做出详细说明。

全屏翻页效果实现 - 锐客网* {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%; }
页面1
页面2
页面3
页面4

在做完上边的优化之后，发现自己今后还是要多读书，多去开源网站看高手们写的代码，还要不断地发挥自己的想象力去完善自己的代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。