javascript实现页面滚屏效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhongguohaoshaonian/article/details/52627505

当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析。本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换。笔者未对页面的平稳滚动进行实现,读者可自行试验研究。请看代码:
这是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技术,效果稍欠人意,读者可自行学习,对这一技术进行完美实现。

阅读更多
换一批

没有更多推荐了,返回首页