How to use the Mouse Wheel Event in HTML5 Pages
参考网址：https://www.sitepoint.com/html5-javascript-mouse-wheel/
使用鼠标滚动事件可以让HTML5页面更加的灵活。让一个元素元素放大或者缩小。而不是单纯的滚动一个页面。
对于mouseWheel事件在各个浏览器中存在浏览器兼容性问题。
Firefox：DOMMouseScroll (detail判断上下滑动)
IE/Chrome/Safari/Opera：mousewheel (wheelDelta判断鼠标上下滑动)
注意：苹果禁用Safari滚动，但在webkit下不会出道问题
/*
* down e.wheelDelta==-120 e.detail > 0
* up e.wheelDelta==120 e.detail < 0
*/
例子：滚动缩放页面中的图片大小
<img src="img/img.jpg" id="myimg">
var myimg = document.getElementById("myimg"); if(myimg.addEventListener){ //IE9,Chrome,Safari,Opera myimg.addEventListener('mousewheel',MouseWheelHandler,false); //Firefox myimg.addEventListener('DOMMouseScroll',MouseWheelHandler,false); } //IE 6/7/8 else{ myimg.attachEvent('onmousewheel',MouseWheelHandler); }
向下滑缩小图片，向上放大图片，此处注意Firefox的兼容性问题
function MouseWheelHandler(e){ //cross-browser wheel delta var e = window.event || e;//old IE support var delta = Math.max(-1,Math.min(1,(e.wheelDelta || -e.detail))); console.log(delta); console.log("e.detail"+ e.detail); /* * down e.wheelDelta==-120 e.detail > 0 * up e.wheelDelta==120 e.detail < 0 * */ console.log("e.wheelDelta"+ e.wheelDelta); myimg.style.width = Math.max(50,Math.min(800,myimg.width + (30 * delta))) + "px"; return false; }
优质内容筛选与推荐>>
1、《从零开始学Swift》学习笔记（Day 35）——会使用下标吗？
2、SQL Server 2008R2安装错误—“is not a valid login or you do have permission”
3、kafka入门：简介、使用场景、设计原理、主要配置及集群搭建--转载
4、2018（秋）软工作业 3：个人编程练习
5、Netty: Documentation