小刘同学的第四十四篇博文
今天想早点休息，在家里的事情总是特别多的，这几天的确是都不是很想好好学习，然而又有太多太多的事情等着自己去做，然后在家里还是不能静下心来自习的，也可能是鸡汤喝的太少了。
<!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[▓▓]
