html自动滚屏效果,javascript实现页面滚屏效果

当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。

这是html代码：

Document

屏幕1

屏幕2

屏幕3

屏幕4

屏幕5

• 1
• 2
• 3
• 4
• 5

这里是css结构代码：

*{margin:0; padding:0;}

html,body{

width:100%;

height:100%;

overflow:hidden;

}

.big-box {

width:100%;

height:500%;

text-align:center;

position:absolute;

}

.big-box .item{

height:20%;

}

.big-box .item1 {

background-color:red;

}

.big-box .item2 {

background-color:blue;

}

.big-box .item3 {

background-color:purple;

}

.big-box .item4 {

background-color:gold;

}

.big-box .item5 {

background-color:pink;

}

.controls {

list-style:none;

position:absolute;

top:20%;

right:20px;

}

.controls li {

width:50px;

height:50px;

font:bold 22px/50px "宋体";

text-align:center;

background-color:#000;

color:#fff;

cursor:pointer;

}

.controls li+li {

margin-top:5px;

}

.controls li.active {

background-color:#fff;

color:red;

}

这里是JavaScript代码：

/*

思路：

第一步：当页面加载完后，获取所要操作的节对象

第二步：为document添加一个滚轮滚动事件

第三步：滚轮滚动切换

获取当前浏览器可视区域的高度

var viewHeight = document.body.clientHeight

滚轮切换的目的：就是更改bigBox的top值

top:最大0

top:最小 viewHeight*-4

从上到下或从下到上：最多走4次(5个页面) 每一次走viewHeight

控制的关键点：索引 定一个索引 2

滚轮↓

索引+1

滚轮↑

索引-1

bigBox.style.top = -索引*viewHeihgt

*/

var bigBox = document.getElementById("bigBox");//获取bigBox节点对象

var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象

var viewHeight = document.body.clientHeight;//获取当前页面高度

var flag = true;//设置开关

var index = 0;//设置索引

//封装事件,兼容浏览器

function on(obj,eventType,fn){

if(obj.addEventListener){

obj.addEventListener(eventType, fn);

}else{

obj.attachEvent("on" + eventType, fn);

}

}

//鼠标滚动事件处理函数

function handler(e){

var _e = window.event || e;

if(flag){

flag = false;

if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠标滚轮向上滚动，detail为火狐判断条件

index--;

if(index<0){

index = 0;

}

}else{//向下滚动

index++;

if(index>lis.length-1){//如果索引大于页面数，就是滚到最后一张页面时，再滚动鼠标页面不再滚动

index = lis.length-1;

}

}

bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面

for(var i=0; i

lis[i].className = "";//重置全部li的类

}

lis[index].className = "active";//设置当前li的类名

setTimeout(function(){//页面滚动间隔一秒，防止滚动太快

flag = true;//重新开启开关

},1000);

}

}

on(document,"mousewheel",handler);//滚轮滚动事件

on(document,"DOMMouseScroll",handler);//滚轮滚动事件，适配火狐浏览器

//数字标签点击处理

for(var i=0; i

lis[i].tag = i;

lis[i].onclick = function(){

for(var j=0; j

lis[j].className = "";

}

lis[this.tag].className = "active";

bigBox.style.top = -this.tag*viewHeight + "px";

}

}

笔者在这里进行了html，css和javascript的分离，读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明，方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现，纯javascript技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！