zoukankan      html  css  js  c++  java
  • 小刘同学的第四十四篇博文

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html,body{
                 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            .screen-wheel{
                 100%;
                height: 100%;
                list-style: none;
                margin: 0;
                padding: 0;
                position: absolute;
                top:0;
                left:0;
            }
            .screen-wheel .screen-page{
                 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[▓▓] 

  • 相关阅读:
    POJ3421(质因数分解)
    POJ2236(并查集入门)
    POJ3111(最大化平均值)
    POJ2976(最大化平均值)
    POJ3104(二分搜索)
    POJ3258(最大化最小值)
    POJ2456(最大化最小值)
    POJ1063Cable master(二分搜索)
    Numpy模块(一)
    Django简介
  • 原文地址:https://www.cnblogs.com/xiaoliutongxue/p/8419925.html
Copyright © 2011-2022 走看看