Heim >Web-Frontend >js-Tutorial >jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery

WBOY
WBOYOriginal
2016-05-16 17:42:241005Durchsuche

这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快。

实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了。

下面给出一个例子(在github下载的代码中有这个例子):

复制代码 代码如下:





jQuery elevateZoom Demo




Basic Zoom Example


jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery



see more examples online http://www.elevateweb.co.uk/image-zoom/examples
<script> <BR>$('#zoom_01').elevateZoom(); <BR></script>



实现的效果如下:
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)_jquery 
具体代码没有研究,只是知道怎么使用了,特在此分享一下。
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn