jQuery的圖像放大所有圖像

Question

我在網上（ http://www.elevateweb.co.uk/image-zoom ）上找到了一個jquery圖像縮放插件，但是我想應用此插件有200多個小圖像。 我想我需要在elevatezoom.js上跟蹤鼠標，我該怎么做？

HTML

<img id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>

腳本

<script> $("#zoom_01").elevateZoom(); </script>

（elevatezoom.js文件可在http://www.elevateweb.co.uk/download-file上找到 ）

Answer 1

嘗試這樣的事情：

首先，提供一個.class來處理所有圖像

<img class="image-to-zoom" 
     id="zoom_01" src="image1.png" data-zoom-image="image1.jpg"/>

然后，附着到.class的mouseover事件來觸發elevateZoom()的元件上具有鼠標懸停

$('.image-to-zoom').on('mouseover',function(){
    //This element is being 'mouseovered', so trigger the plugin
    $(this).elevateZoom();
});