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技术，效果稍欠人意，读者可自行学习，对这一技术进行完美实现。

 

posted @ 2017-01-17 15:28  依然仰望  阅读(1478)  评论(0)  编辑  收藏  举报