监听鼠标滚轮放大缩小 jq 原生

最新推荐文章于 2023-02-24 14:17:06 发布

原创最新推荐文章于 2023-02-24 14:17:06 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

184 篇文章

订阅专栏

jquery

19 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery监听鼠标滚轮事件来实现图片的放大与缩小功能。针对不同浏览器（如IE9及以上版本、Chrome、Safari、Opera及Firefox）提供了兼容性的解决方案，并详细解释了事件处理函数中如何解析滚轮方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听鼠标滚轮放大缩小 jq 原生

jq

 		// IE9, Chrome, Safari, Opera
        $('xx').on("mousewheel",MouseWheelHandler);
        // Firefox
        $('xx').on("DOMMouseScroll",MouseWheelHandler);

// 鼠标滚轮放大缩小=
function MouseWheelHandler(event){
    var type = event.type;
    if (type == 'DOMMouseScroll' || type == 'mousewheel') {
        event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;
    }
    console.log(event.delta)
    if(event.delta == 1){ //上滚 
      	//业务代码
    }else if(event.delta == -1){ //下滚  放大
        //业务代码
    }else{
        console.log("鼠标滚轮放大缩小状态获取失败")
    }
};

// 解绑
        $(_this.el.imgViewer).off("mousewheel");
        $(_this.el.imgViewer).off("DOMMouseScroll");

原生js

var myimage = document.getElementById("img");   
if (myimage.addEventListener) {   
    //addEventListener适用于版本较新的IE浏览器 ，如IE9以及火狐浏览器，
    myimage.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox浏览器使用的滚轮事件是 DOMMouseScroll
    myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);   
}   
//attachEvent适用于旧的 IE浏览器，IE 6/7/8   
else myimage.attachEvent("onmousewheel", MouseWheelHandler);

//第三个参数设置为true就在捕获过程中执行处理函数，反之就在冒泡过程中执行处理函数。

function MouseWheelHandler(e) { 
	var e = window.event; 
	var delta = Math.max(-1, Math.min(1, (e.wheelDelta))); 
	myimage.style.width = Math.max(727, myimage.width + (30 * delta)) + "px"; 
	myimage.style.height = Math.max(500, myimage.height + (30 * delta)) + "px"; 
	return false; 
}
detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中对于wheelDelta正数表示为向上，负数表示向下，而对于detail则相反。