html 5中的鼠标滚动事件

在web中,要是鼠标的滚动轴的事件能利用起来,那是十分好的事情。比如鼠标轮轴滚动时,图片可以自由放大和缩小。
很多浏览器中,都支持mousewheel事件,并且有wheelDelta 属性,
支持正数的值话向上鼓动,负数的话向下滚动,但可惜firfox中,对这个的规定
是刚好相反的,正数的话向下滚动,负数的向上滚动,并且实现的事件是
DOMMouseScroll。
下面例子说明下如何用这个事件,比如有一张图:
<img id="myimage" src="myimage.jpg" alt="my image" />


var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
// IE9, Chrome, Safari, Opera
myimage.addEventListener("mousewheel", MouseWheelHandler, false);
// Firefox
myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);


我们还要纠正firefox这个奇怪的规定,
function MouseWheelHandler(e) {
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";
return false;
}

这个功能在IE,CHROME下,FIERFOX下都可以了,但SAFRI是不行的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值