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

2018-06-24 01:29:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

<!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>

  这是老师写的homework4,就根据自己的理解然后边写注释。

 

  其实不太能理解这里为什么要写return。。。但是删了这一句又不行,这是疑惑的一点。。。

  已经连续三天状态不好了,明天一定要调整过来。

  晚安,朋友们(|3[▓▓] 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:“茴”字有四种写法,this也是一样

下一篇:浏览器内核趣对话