我在网上发现了一个jquery图像缩放插件(http://www.elevateweb.co.uk/image-zoom),但是我想要应用这个插件的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上找到)
答案 0 :(得分:2)
尝试这样的事情:
首先,给.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();
});