javascript实现页面滚屏效果

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

这是html代码：

 
 
 
 
 
 
 

  
屏幕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 
 

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

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