实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。
 
下面给出一个例子(在github下载的代码中有这个例子)：
插件下载地址：https://github.com/elevateweb/elevatezoom

 
[html] 
<!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>  www.2cto.com
    $('#zoom_01').elevateZoom();  
</script>  
</body>  
</html>  
 
实现的效果如下：

jquery.elevateZoom实现仿淘宝看图片，一张小的，一张大用于鼠标经过时候显示的更多相关文章

  1. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  2. JS 仿淘宝幻灯片 非完整版 小案例

    仿淘宝幻灯片,基础版,后期效果是要做到每次点击小圆点,切换都无缝 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...

  3. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  4. 【原创smarty仿淘宝商品图片轮播+放大镜效果】

    1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...

  5. 仿淘宝js图片切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  8. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  9. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

随机推荐

  1. mongodb移除分片

    MongoDB的Shard集群来说,添加一个分片很简单,AddShard就可以了. 但是缩减集群(删除分片)这种一般很少用到.由于曙光的某服务器又挂了,所以我们送修之前必须把它上面的数据自动迁移到其他 ...

  2. asp.net如何删除文件夹及文件内容操作

    static void DeleteDirectory(string dir) { && Directory.GetFiles(dir).Length == ) { Directory ...

  3. 源码篇：SDWebImage

    攀登,一步一个脚印,方能知其乐 源码篇:SDWebImage 源码来源:https://github.com/rs/SDWebImage 版本: 3.7 SDWebImage是一个开源的第三方库,它提 ...

  4. ANT 操控 ORACLE数据库实践

    Ant 执行系统命令没有任何问题,这次实际系统命令中可以说遇到了两个问题,一个是启动服务的命令是含有空格的,第二个如何备份数据库可以自动加上日期. 首先,我们启动oracle数据库,操作有两个: 1. ...

  5. 封装sdk API 应用

    1 #include "QWinApp.h" 2 #include "QGlobal.h" 3 int WINAPI _tWinMain(HINSTANCE h ...

  6. Swift 与 JSON 数据 浅析

    转载自:http://www.cnblogs.com/theswiftworld/p/4660177.html 我们大家平时在开发 App 的时候,相信接触最多的就是 JSON 数据了.只要你的 Ap ...

  7. Android中布局文件中使用onClick属性

    安卓开发中,布局文件中的控件有一个属性,是onClick,例如:           <Button             android:id="@+id/button1" ...

  8. 一个很好的通用 excel 导出工具类

    此类用主要 jxl +注解+流 实现扩展性很强,jxl性能会比poi好一点,值得我们学习. package oa.common.utils; import java.io.OutputStream; ...

  9. 转：Loadrunner报错“Too many local variablesAction.c”解决方法

    问题描述,在Action.c里定义数组时如果数组长度过长,如char a[1024*1024]运行时即会报错: 问题原因及解决方法如下: 1. VuGen对于局部变量可以分配的最大内存为64K,如果想 ...

  10. 查看光纤卡wwn号【转载】

    转自:查看光纤卡wwn号windows操作系统下_朝晖_新浪博客http://blog.sina.com.cn/s/blog_4ce992f40101dxyv.html 查看光纤卡wwn号window ...