Image Zoomin-zoomout in mouse scroll

Question

我在弹出窗口中有一个图像。我想在HTML中的鼠标滚动上放大和缩小图像。我该如何使用JavaScript或jQuery来做到这一点？

Answer 1

这可能会帮助你

包括jQuery库和jQuery UI和jQuery imgViewer页面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="libs/jquery-ui.js"></script> 
<script type="text/javascript" src="src/imgViewer.js"></script> 

包括鼠标滚轮插件和其他所需的库在PGAE

<script type="text/javascript" src="libs/jquery.mousewheel.min.js"></script> 
<script src="jquery.fs.zoetrope.min.js"></script> 
<script src="hammer.min.js"></script> 
<script src="jquery.hammer.js"></script> 

上在您的网页上插入图片（您可以更改图片的名称和尺寸）

<img id="image1" src="1.jpg" width="600" /> 

的JavaScript（如果你改变上面的图片名称请从查询过更改名称）

<script type="text/javascript"> 
;(function($) { 
$("#image1").imgViewer({ 
onClick: function(e, self) { 
var pos = self.cursorToImg(e.pageX, e.pageY); 
$("#position").html(e.pageX + " " + e.pageY + " " + pos.relx + " " + pos.rely); 
} 
}); 
})(jQuery); 
</script>