jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
更新时间：2013年02月04日 14:51:58 作者：
分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果,感兴趣的朋友可以研究下，或许对你学习jquery有所帮助,千万不要错过啊
这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。
实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。
下面给出一个例子(在github下载的代码中有这个例子)：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevateZoom-2.3.0.min.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<br />
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$('#zoom_01').elevateZoom();
</script>
</body>
</html>
实现的效果如下：
具体代码没有研究，只是知道怎么使用了，特在此分享一下。
实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。
下面给出一个例子(在github下载的代码中有这个例子)：
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevateZoom-2.3.0.min.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<br />
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$('#zoom_01').elevateZoom();
</script>
</body>
</html>
实现的效果如下：
具体代码没有研究，只是知道怎么使用了，特在此分享一下。
相关文章
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下2014-05-05
JQuery选择器之六 测试代码如下2009-07-07
jQuery图片轮播（二）利用构造函数和原型创建对象以实现继承
本文主要介绍了利用构造函数和原型创建对象以实现继承，并附上完成简单轮播对象的封装的示例代码。有兴趣的朋友可以看下2016-12-12
这篇文章主要介绍了jQuery插件开发精品教程让你的jQuery提升一个台阶 的相关资料,需要的朋友可以参考下2016-01-01
Select下拉框的问题，想在选择一个选项后，前台显示做出变动，并且知道选择的是第几个选项。怎么解决这个问题呢？下面小编给大家分享SelecT下拉框选中和取值的解决方法，需要的朋友参考下吧2016-11-11
这篇文章主要介绍了HTML页面如何弹出居中可拖拽的自定义窗口层,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery 实现侧边浮动导航菜单效果,需要的朋友可以参考下2014-12-12
jQuery确实是一项伟大的技术，通过jQuery的插件，我们可以方便的创建具有更好用户界面的网站。在本文中，将和大家分享40个对你创建更好用户界面的jQuery技术和教程。2011-01-01
jquery UI Datepicker时间控件冲突问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件冲突问题的解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了jQuery实现DIV层淡入淡出拖动特效的方法,涉及jQuery针对鼠标操作的常用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
最新评论