javascript实现页面滚屏效果
当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。
这是html代码：
<!doctypehtml> <html> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel="stylesheet"type="text/css"href="style.css"/> </head> <body> <divclass="big-box"id="bigBox"> <divclass="itemitem1"><h1>屏幕1</h1></div> <divclass="itemitem2"><h1>屏幕2</h1></div> <divclass="itemitem3"><h1>屏幕3</h1></div> <divclass="itemitem4"><h1>屏幕4</h1></div> <divclass="itemitem5"><h1>屏幕5</h1></div> </div> <ulclass="controls"> <liclass="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <scriptsrc="behavior.js"></script> </body> </html>
这里是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;
}
.controlsli{
width:50px;
height:50px;
font:bold22px/50px"宋体";
text-align:center;
background-color:#000;
color:#fff;
cursor:pointer;
}
.controlsli+li{
margin-top:5px;
}
.controlsli.active{
background-color:#fff;
color:red;
}
这里是JavaScript代码：
/*
思路：
第一步：当页面加载完后，获取所要操作的节对象
第二步：为document添加一个滚轮滚动事件
第三步：滚轮滚动切换
获取当前浏览器可视区域的高度
varviewHeight=document.body.clientHeight
滚轮切换的目的：就是更改bigBox的top值
top:最大0
top:最小viewHeight*-4
从上到下或从下到上：最多走4次(5个页面)每一次走viewHeight
控制的关键点：索引定一个索引2
滚轮↓
索引+1
滚轮↑
索引-1
bigBox.style.top=-索引*viewHeihgt
*/
varbigBox=document.getElementById("bigBox");//获取bigBox节点对象
varlis=document.querySelectorAll(".controlsli");//获取所有的li节点对象
varviewHeight=document.body.clientHeight;//获取当前页面高度
varflag=true;//设置开关
varindex=0;//设置索引
//封装事件,兼容浏览器
functionon(obj,eventType,fn){
if(obj.addEventListener){
obj.addEventListener(eventType,fn);
}else{
obj.attachEvent("on"+eventType,fn);
}
}
//鼠标滚动事件处理函数
functionhandler(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(vari=0;i<lis.length;i++){
lis[i].className="";//重置全部li的类
}
lis[index].className="active";//设置当前li的类名
setTimeout(function(){//页面滚动间隔一秒，防止滚动太快
flag=true;//重新开启开关
},1000);
}
}
on(document,"mousewheel",handler);//滚轮滚动事件
on(document,"DOMMouseScroll",handler);//滚轮滚动事件，适配火狐浏览器
//数字标签点击处理
for(vari=0;i<lis.length;i++){
lis[i].tag=i;
lis[i].onclick=function(){
for(varj=0;j<lis.length;j++){
lis[j].className="";
}
lis[this.tag].className="active";
bigBox.style.top=-this.tag*viewHeight+"px";
}
}
笔者在这里进行了html，css和javascript的分离，读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明，方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现，纯javascript技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！