8.02 今天作业如下
创建一个div块,向上滚动鼠标滚轮减少div块的高度,向下滚动鼠标滚轮增加div块的高度。
主要用到 onmousewheel、clientHeight
- onmousewheel:鼠标滚轮事件,可以在任何元素上触发,同时在用户触发该事件时可以获得“event.wheelDelta”属性值。
- “event.wheelDelta”:当用户向上滚动鼠标滚轮时,wheelDelta属性的值是150;当用户向下滚动鼠标滚轮时,wheelDelta属性的值是-150;(具体可以在自己的控制台测试,我用的谷歌浏览器出来的是150)
- clientHeight::元素在页面上返回内容的可视宽度(不包括边框,边距或滚动条)
首先创建一个小方块,并给他固定的宽和高。
<div class="box1"></div>
.box1 {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: red;
}
接着开始写JS,首先用querySelector获取到这个小方块,接着触发onmousewheel事件。
当e.wheelDelta > 0 (滚轮向上为150)时,让小方块的宽度减少10px,将这个减少后的值通过.style.height设置内联样式。
鼠标滚轮向下同理。
<script>
// 1、创建一个div块,向上滚动鼠标滚轮减少div块的高度,向下滚动鼠标滚轮增加div块的高度。
var box1 = document.querySelector('.box1');
box1.onmousewheel = function(e) {
var boxHeight = box1.clientHeight;
if(e.wheelDelta > 0){
// 向上滚轮
boxHeight = boxHeight - 10;
this.style.height = boxHeight + 'px';
}else{
// 向下滚轮
boxHeight = boxHeight + 10;
this.style.height = boxHeight + 'px';
}
}
</script>