今天只是简单更新了一些老师写的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天没怎么好好学代码了，自己的问题，自己清楚吧。
不去自习果然是不行的，心情变得特别差，不多说了，晚安，朋友们。