【求助】自定义事件/鼠标滚轮滚动放大缩小图片,chrome下失效求解?-CSDN博客

55 阅读1分钟

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

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>


\