Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 17:42:24
Original
943 people have browsed it

这个插件的名字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 
具体代码没有研究,只是知道怎么使用了,特在此分享一下。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!