javascript实现页面滚屏效果

更新时间：2017年01月17日 16:02:42 作者：依然仰望

本文主要介绍了javascript实现页面滚屏效果的方法，具有一定的参考价值，下面跟着小编一起来看下吧

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

这是html代码：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
 <div class="big-box" id="bigBox">
  <div class="item item1"><h1>屏幕1</h1></div>
  <div class="item item2"><h1>屏幕2</h1></div>
  <div class="item item3"><h1>屏幕3</h1></div>
  <div class="item item4"><h1>屏幕4</h1></div>
  <div class="item item5"><h1>屏幕5</h1></div>
 </div>
 <ul class="controls">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
 <script src="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;
}
.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.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(var i=0; i<lis.length; i++){
 lis[i].tag = i;
 lis[i].onclick = function(){
 for(var j=0; j<lis.length; j++){
  lis[j].className = "";
 }
 lis[this.tag].className = "active";
 bigBox.style.top = -this.tag*viewHeight + "px";
 }
}

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

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

您可能感兴趣的文章:

利用JavaScript脚本实现滚屏效果的方法

js
滚屏

理解js回收机制通俗易懂版
这篇文章主要帮助大家更好的理解js回收机制，通俗易懂，便于大家理解，感兴趣的小伙伴们可以参考一下
2016-02-02
JavaScript跨域方法汇总
这篇文章主要介绍了JavaScript跨域方法汇总,本文总结了12种JavaScript的跨域方法,需要的朋友可以参考下
2014-10-10
原生js实现放大镜效果
本文主要分享了原生js封装实现放大镜效果的示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
详解Javascript事件驱动编程
这篇文章主要为大家详细介绍了Javascript事件驱动编程的相关资料,通过经典案例向大家介绍Javascript事件驱动编程，需要的朋友可以参考下
2016-01-01
vue+ts下对axios的封装实现
这篇文章主要介绍了vue+ts下对axios的封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
解决JS请求服务器gbk文件乱码的问题
本文给大家介绍js请求服务器gbk文件乱码问题，解决办法需要设置xhr.overrideMimeType("text/csv;charset=gb2312");才正确，具体代码怎么设置，将在本文中给大家提到，需要的朋友一起学习吧
2015-10-10
JavaScript字符串对象
这篇文章主要为大家详细介绍了JavaScript字符串对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
使用js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010-05-05
Javascript闭包实例详解
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，本文通过代码实例给大家介绍javascript闭包，对javascipt闭包相关知识感兴趣的朋友一起学习吧
2015-11-11
uniapp使用vue-cli新建项目并打包的步骤
这篇文章主要介绍了uniapp使用vue-cli新建项目并打包,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11