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

　　今天只是简单更新了一些老师写的homework3的注释。
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         html,body{
  8              100%;
  9             height: 100%;
 10             margin: 0;
 11             padding: 0;
 12             overflow: hidden;
 13         }
 14         .screen-wheel{
 15              100%;
 16             height: 100%;
 17             list-style: none;
 18             margin: 0;
 19             padding: 0;
 20             position: absolute;
 21             top:0;
 22             left:0;
 23         }
 24         .screen-wheel .screen-page{
 25              100%;
 26             height: 100%;
 27         }
 28     </style>
 29 </head>
 30 <body>
 31     <ul id="pages" class="screen-wheel">
 32         <li class="screen-page" style="background:#de1643"></li>
 33         <li class="screen-page" style="background:#ff9800"></li>
 34         <li class="screen-page" style="background:#ffeb3b"></li>
 35         <li class="screen-page" style="background:#4caf50"></li>
 36         <li class="screen-page" style="background:#607d8b"></li>
 37         <li class="screen-page" style="background:#2196f3"></li>
 38         <li class="screen-page" style="background:#673ab7"></li>
 39     </ul>
 40     <script>
 41         var pages = document.getElementById("pages");
 42         // 设置一个滚轮开关，如果滚轮滚动多次，但滚轮事件依旧只触发一次
 43         var scrolling = false;
 44         // 存放当前索引值
 45         var index = 0;
 46         var length = pages.children.length;
 47         document.body.onmousewheel = function(e){
 48             // 浏览器兼容性问题
 49             var base = e.wheelDelta||-e.detail;
 50             if(!scrolling){
 51                 scrolling = true;
 52                 // value存放移动数值的大小 等于 当前索引值*100
 53                 var value = index*100;
 54                 // dir记录滚轮是向上滚还是向下滚的
 55                 var dir;
 56                 // base值大于0，说明向上滚
 57                 // 并且索引值index不能小于0，红色是第一个，index为0
 58                 if(base>0 && index>0){
 59                     console.log("向上滚动"+index);
 60                     dir = true;
 61                     index--;
 62                 }else if(base<0 && index<length-1){
 63                     console.log("向下滚动"+index);
 64                     dir = false;
 65                     index++;
 66                 }
 67                 // index小于等于0，或者是index大于等于7
 68                 else{
 69                     scrolling = false;
 70                     console.log("执行return")
 71                     // 如果代码执行了return，表示整个方法就停止向下执行
 72                     return;
 73                 }
 74                 var animate = setInterval(function(){
 75                     dir?value--:value++;
 76                     pages.style.top = "-"+value+"%";
 77                     if(value===index*100){
 78                         window.clearInterval(animate);
 79                         scrolling = false;
 80                     }
 81                 },10);
 82                 // setTimeout(function(){
 83                 //     scrolling = false;
 84                 // },500);
 85             }
 86         }
 87         document.body.addEventListener("DOMMouseScroll",document.body.onmousewheel,false);
 88         // document.body.onmousewheel = function(e){
 89         //     if(!scrolling){
 90         //         scrolling = true;
 91         //         if(e.wheelDelta>0 && index>0){
 92         //             console.log("向上滚动");
 93         //             index--;
 94         //             pages.style.top = "-"+index+"00%";
 95         //         }else if(e.wheelDelta<0 && index<length-1){
 96         //             console.log("向下滚动");
 97         //             index++;
 98         //             pages.style.top = "-"+index+"00%";
 99         //         }
100         //         setTimeout(function(){
101         //             scrolling = false;
102         //         },500);
103         //     }
104         // }
105     </script>
106 </body>
107 </html>
　　其实已经是连续4天没怎么好好学代码了，自己的问题，自己清楚吧。
　　不去自习果然是不行的，心情变得特别差，不多说了，晚安，朋友们。