javascript实现页面滚屏效果
当我们浏览网页的时候，时常会碰到可以滚动屏幕的炫酷网页，今天笔者对这一技术进行简单实现，效果不及读者理想中那般炫酷，主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签，代表五个页面，点击数字可以切换到对应的页面，滚动鼠标滑轮可以实现数字标签的切换，页面的切换。笔者未对页面的平稳滚动进行实现，读者可自行试验研究。这是html代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="style.css" /> 7 </head> 8 <body> 9 <div class="big-box" id="bigBox"> 10 <div class="item item1"><h1>屏幕1</h1></div> 11 <div class="item item2"><h1>屏幕2</h1></div> 12 <div class="item item3"><h1>屏幕3</h1></div> 13 <div class="item item4"><h1>屏幕4</h1></div> 14 <div class="item item5"><h1>屏幕5</h1></div> 15 </div> 16 <ul class="controls"> 17 <li class="active">1</li> 18 <li>2</li> 19 <li>3</li> 20 <li>4</li> 21 <li>5</li> 22 </ul> 23 <script src="behavior.js"></script> 24 </body> 25 </html>
这里是css结构代码：
1 *{margin:0; padding:0;}
2 html,body{
3 width:100%;
4 height:100%;
5 overflow:hidden;
6 }
7 .big-box {
8 width:100%;
9 height:500%;
10 text-align:center;
11 position:absolute;
12 }
13 .big-box .item{
14 height:20%;
15 }
16 .big-box .item1 {
17 background-color:red;
18 }
19 .big-box .item2 {
20 background-color:blue;
21 }
22 .big-box .item3 {
23 background-color:purple;
24 }
25 .big-box .item4 {
26 background-color:gold;
27 }
28 .big-box .item5 {
29 background-color:pink;
30 }
31 .controls {
32 list-style:none;
33 position:absolute;
34 top:20%;
35 right:20px;
36 }
37 .controls li {
38 width:50px;
39 height:50px;
40 font:bold 22px/50px "宋体";
41 text-align:center;
42 background-color:#000;
43 color:#fff;
44 cursor:pointer;
45 }
46 .controls li+li {
47 margin-top:5px;
48 }
49 .controls li.active {
50 background-color:#fff;
51 color:red;
52 }
这里是JavaScript代码：
1 /*
2 思路：
3 第一步：当页面加载完后，获取所要操作的节对象
4 第二步：为document添加一个滚轮滚动事件
5 第三步：滚轮滚动切换
6 获取当前浏览器可视区域的高度
7 var viewHeight = document.body.clientHeight
8 滚轮切换的目的：就是更改bigBox的top值
9 top:最大0
10 top:最小 viewHeight*-4
11 从上到下或从下到上：最多走4次(5个页面) 每一次走viewHeight
12 控制的关键点：索引 定一个索引 2
13 滚轮↓
14 索引+1
15 滚轮↑
16 索引-1
17 bigBox.style.top = -索引*viewHeihgt
18 */
19 var bigBox = document.getElementById("bigBox");//获取bigBox节点对象
20 var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象
21 var viewHeight = document.body.clientHeight;//获取当前页面高度
22 var flag = true;//设置开关
23 var index = 0;//设置索引
24
25 //封装事件,兼容浏览器
26 function on(obj,eventType,fn){
27 if(obj.addEventListener){
28 obj.addEventListener(eventType, fn);
29 }else{
30 obj.attachEvent("on" + eventType, fn);
31 }
32 }
33 //鼠标滚动事件处理函数
34 function handler(e){
35 var _e = window.event || e;
36 if(flag){
37 flag = false;
38 if(_e.wheelDelta==120 || _e.detail==-3){//如果鼠标滚轮向上滚动，detail为火狐判断条件
39 index--;
40 if(index<0){
41 index = 0;
42 }
43 }else{//向下滚动
44 index++;
45 if(index>lis.length-1){//如果索引大于页面数，就是滚到最后一张页面时，再滚动鼠标页面不再滚动
46 index = lis.length-1;
47 }
48 }
49 bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
50 for(var i=0; i<lis.length; i++){
51 lis[i].className = "";//重置全部li的类
52 }
53 lis[index].className = "active";//设置当前li的类名
54 setTimeout(function(){//页面滚动间隔一秒，防止滚动太快
55 flag = true;//重新开启开关
56 },1000);
57 }
58 }
59 on(document,"mousewheel",handler);//滚轮滚动事件
60 on(document,"DOMMouseScroll",handler);//滚轮滚动事件，适配火狐浏览器
61 //数字标签点击处理
62 for(var i=0; i<lis.length; i++){
63 lis[i].tag = i;
64 lis[i].onclick = function(){
65 for(var j=0; j<lis.length; j++){
66 lis[j].className = "";
67 }
68 lis[this.tag].className = "active";
69 bigBox.style.top = -this.tag*viewHeight + "px";
70 }
71 }
笔者在这里进行了html，css和javascript的分离，读者可自行整合。代码编写的逻辑思路也在代码中进行了简单说明，方便读者阅读和理解。笔者在这里只是对滚屏技术进行简单的实现，纯javascript技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。
浙公网安备 33010602011771号