【求助】自定义事件/鼠标滚轮滚动放大缩小图片，chrome下失效求解？

xyphf_和派孔明

于 2016-06-27 00:30:44 发布

阅读量2.6k

点赞数

分类专栏： DOM&BOM操作文章标签： DOM

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/51765414

版权

DOM&BOM操作专栏收录该内容

64 篇文章

订阅专栏

自定义事件/鼠标滚轮滚动放大缩小图片

chrome下失效求解？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自定义事件/鼠标滚轮滚动放大缩小图片</title>
<script src="jquery-1.11.1.js"></script>
<script>

$(function(){
	
	$('#img1').on('zoomIn',function(){  //缩小
		
		$(this).css('width',200);
		
	});
	
	$('#img1').on('zoomOut',function(){  //放大
		
		$(this).css('width',700);
		
	});
	
	$('#img1').on('DOMMouseScroll',function(ev){
		
		if(ev.originalEvent.detail > 0){
			$(this).trigger('zoomIn');
		}
		else{
			$(this).trigger('zoomOut');
		}
		
	});
	
	
	
});

</script>
</head>

<body>
<img src="1.jpg" id="img1">
</body>
</html>