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

JavaScript 同时被 2 个专栏收录
181 篇文章 1 订阅
19 篇文章 0 订阅

监听 鼠标滚轮放大缩小 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则相反。
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值