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>