实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为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. mongostat

    监控MongoDB有一下几种方法: 1)使用MongoDB软件包自带的工具,如mongostat,mongotop等.2)使用MongoDB数据库命令3)使用MongoDB公司提供的MMS监控服务 m ...

  2. C# 将字符串转为&#2345;这种的 html实体编码

    1.字符串转为html实体编码 private string GetHtmlEntities(string str) { string r = string.Empty; ; i < str.L ...

  3. ibatis resultMap 结果集映射

    1.结果集映射 就是将返回的记录,逐个字段映射到java对象上:如果数据库字段与java对象的成员变量名对应的话,则使用resultClas即可 2.实现 结合 ibatis初探这篇文章中提到的pro ...

  4. n++与++n的区别

    n++ 是先执行n++再进行赋值返回的只却是n. ++n 是先赋值之后再执行++n. 其实执行 n++ and ++n 都算是一次赋值 所以若 n = n++ and n = ++n 其实就是2次赋值 ...

  5. 四种xml的解析方式

    这篇文章是我上网找资料,加上自己总结了一些而得 资料来源: http://www.cnblogs.com/allenzheng/archive/2012/12/01/2797196.html http ...

  6. java模式:深入单例模式

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://devbean.blog.51cto.com/448512/203501 在GoF ...

  7. 关于Spring的69个面试问答——终极列表

    本文由 ImportNew - 人晓 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会 ...

  8. java设计模式案例详解:工厂模式

    1.简单工厂模式 在不考虑扩展的情况下还是很好用的,其实我们写代码也很经常用到,其主要理解在于传入不同参数则构建不同对象,只有一个工厂,如需添加产品涉及到扩展需要修改比较多的东西,不符合开闭原则,如下 ...

  9. Mishka and Interesting sum

    Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megabytes input ...

  10. Vs2010 WPF 项目打包

    [转]图解WPF程序打包全过程 首先打开已经完成的工程,如图: 下面开始制作安装程序包. 第一步:[文件]——[新建]——[项目]——安装项目. 名称——可以自己根据要求修改. 位置——是指你要制作的 ...