jquery鼠标移入某区域屏蔽鼠标滚轮滚动滚动条

px372265205 2013-07-12 09:53:49

就是我页面里有一张图片，鼠标滚轮可以放大缩小这张图片，但是鼠标滚动的同时滚动条也跟着滚了，如何在鼠标移到图片上时禁止滚动条滚动呢

...全文

2145 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

SiriusGuo 2013-10-15

打赏
举报

ls悲催。。。

java掌门 2013-07-12

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<script src="jquery-1.9.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			var pic=(function(){
				var px=0;
				var size=100
				// 获取鼠标轨迹上或者下
				var getmovepx=function(){
					return px=event.wheelDelta;
				}
				var getsize=function(){
					return size+"%";
				}
				return {
					change:function(){
						var v=getmovepx();
						/*判断鼠标滚轮是向上滚动还是向下滚动*/
						if(v>0){ // 如果滚轮向上滚动
							if(size<200){// 限制图片大小最大200%
								size+=20;
							}
						}else{ // 如果滚轮向下滚动
							if(size>20){ // 限制图片大小最小20%
								size-=20;
							}
						}
						$("#test01").css({"width":getsize(),"height":getsize()});
						return false;
					}
				}
			}());
		</script>
	</head>
	<body>
		<img id="test01"  onmousewheel="return pic.change();" src="test.jpg"/>
	</body>
</html>

lz 这个可是自己手写的要给分啊，

px372265205 2013-07-12

打赏
举报

解决了。。给分

斯洛文尼亚旅游 2013-07-12

打赏
举报

引用 2 楼 px372265205 的回复:

楼上的方法却是管用。。不过管用过头了。。就连我滚轮控制图片放大缩小也给禁了

放大缩小自己编写逻辑就行了，获取是向上还是向下滚动，然后设置img的大小。。 javascript鼠标滚轮滚动事件

px372265205 2013-07-12

打赏
举报

楼上的方法却是管用。。不过管用过头了。。就连我滚轮控制图片放大缩小也给禁了

斯洛文尼亚旅游 2013-07-12

打赏
举报

<script>
    var firefox = navigator.userAgent.indexOf('Firefox') != -1;
    function MouseWheel(e) {
    ///对img按下鼠标滚路，阻止视窗滚动
        e = e || window.event;
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;

        //其他代码
    }
    window.onload = function () {
        var img = document.getElementById('img');
        firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);
    }
</script><div style="height:100px"></div>
<img src="http://avatar.profile.csdn.net/C/5/A/1_px372265205.jpg" id="img" style="width:200px"/>
<div style="height:1000px"></div>