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

    EOF YESTERDAY=`cat /database/log/tns_log/yesterday.out` TODAY=`date '+%d-%b-%Y'` echo $YESTERDAY  $T ...

  2. 8.4 sikuli 集成进eclipse 报错：Unsupported major.minor version 51.0

    8.3中的问题Win32Util.dll: Can't load 32-bit .dll on a AMD 64 bit platform  解决之后,执行还是会有报错:Unsupported maj ...

  3. C++中的函数指针和函数对象总结

    篇一.函数指针函数指针:是指向函数的指针变量,在C编译时,每一个函数都有一个入口地址,那么这个指向这个函数的函数指针便指向这个地址.函数指针的用途是很大的,主要有两个作用:用作调用函数和做函数的参数. ...

  4. Anton and School

    Anton and School time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. gameUnity 网络游戏框架

    常常在想,有没有好的方式,让开发变得简单,让团队合作更加容易. 于是,某一天 动手写一个 架构, 目前版本 暂定 0.1 版本.(unity5.0.0f4 版本以上) 我打算 开源出来 0.1有什么功 ...

  6. JS-运动基础（一）

    <title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red; posit ...

  7. android 市场发布应用小结

    1:360平台发布应用 网址:http://dev.app.360.cn/ 2:腾讯应用宝 平台发布应用: 地址:http://op.open.qq.com/  (未审核通过的不能更新版本) 3:发布 ...

  8. C#无边框窗体移动 将事件绑定到想实现的控件上

    [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImport("use ...

  9. Nginx代理外网映射

    外网映射内网端口8080, 外网访问使用端口8379: nginx监听8080和80端口 #user nobody; worker_processes ; #error_log logs/error. ...

  10. Centos下安装jdk详解

    环境: 系统: [root@Wulaoer ~]# cat /proc/version Linux version 2.6.32-431.el6.x86_64 (mockbuild@c6b8.bsys ...