小刘同学的第四十四篇博文

最新推荐文章于 2020-11-20 22:27:02 发布

dingteng7300

最新推荐文章于 2020-11-20 22:27:02 发布

阅读量88

点赞数

原文链接：http://www.cnblogs.com/xiaoliutongxue/p/8419925.html

版权

　　今天想早点休息，在家里的事情总是特别多的，这几天的确是都不是很想好好学习，然而又有太多太多的事情等着自己去做，然后在家里还是不能静下心来自习的，也可能是鸡汤喝的太少了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .screen-wheel{
            width: 100%;
            height: 100%;
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top:0;
            left:0;
        }
        .screen-wheel .screen-page{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <ul id="pages" class="screen-wheel">
        <li class="screen-page" style="background:#de1643"></li>
        <li class="screen-page" style="background:#ff9800"></li>
        <li class="screen-page" style="background:#ffeb3b"></li>
        <li class="screen-page" style="background:#4caf50"></li>
        <li class="screen-page" style="background:#607d8b"></li>
        <li class="screen-page" style="background:#2196f3"></li>
        <li class="screen-page" style="background:#673ab7"></li>
    </ul>
    <script>
        var pages = document.getElementById("pages");
        // 设置一个滚轮开关，如果滚轮滚动多次，但滚轮事件依旧只触发一次
        var scrolling = false;
        // 存放当前索引值
        var index = 0;
        var length = pages.children.length;
        document.body.onmousewheel = function(e){
            // 浏览器兼容性问题
            var base = e.wheelDelta||-e.detail;
            if(!scrolling){
                scrolling = true;
                // value存放移动数值的大小 等于 当前索引值*100
                var value = index*100;
                // dir记录滚轮是向上滚还是向下滚的
                var dir;
                // base值大于0，说明向上滚
                // 并且索引值index不能小于0，红色是第一个，index为0
                if(base>0 && index>0){
                    console.log("向上滚动"+index);
                    dir = true;
                    index--;
                }else if(base<0 && index<length-1){
                    console.log("向下滚动"+index);
                    dir = false;
                    index++;
                }
                // index小于等于0，或者是index大于等于7
                else{
                    scrolling = false;
                    return;
                }
                var animate = setInterval(function(){
                    dir?value--:value++;
                    pages.style.top = "-"+value+"%";
                    if(value===index*100){
                        window.clearInterval(animate);
                        scrolling = false;
                    }
                },10);
                // setTimeout(function(){
                //     scrolling = false;
                // },500);
            }
        }
        document.body.addEventListener("DOMMouseScroll",document.body.onmousewheel,false);
        // document.body.onmousewheel = function(e){
        //     if(!scrolling){
        //         scrolling = true;
        //         if(e.wheelDelta>0 && index>0){
        //             console.log("向上滚动");
        //             index--;
        //             pages.style.top = "-"+index+"00%";
        //         }else if(e.wheelDelta<0 && index<length-1){
        //             console.log("向下滚动");
        //             index++;
        //             pages.style.top = "-"+index+"00%";
        //         }
        //         setTimeout(function(){
        //             scrolling = false;
        //         },500);
        //     }
        // }
    </script>
</body>
</html>