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

    在.net开发环境中查找XSD.exe文件,比如我的在C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin目录下,将该路径添加到Path中,打开控制台,到 ...

  2. Lua 基础 -- 学习笔记

    标签(空格分隔): Lua 1. Lua可以一次性给多个变量赋值 变量比赋值多,多的变量就赋值nil 变量比赋值少,多的赋值舍弃 local a, b, c = 1, 2, 3 print( a, b ...

  3. C++虚函数的新用法

    1.今天在segmentfault上看到了一个C++虚函数的新用法,先上代码 #include <iostream> using namespace std; class B { publ ...

  4. 4位开锁<dfs>

    题意: 有一个四位密码的锁,每一位是1~9的密码,1跟9相连.并且相邻的连个密码位可以交换.每改变一位耗时1s,给出锁的当前状态和密码,求最少解锁时间. 思路: 用bfs枚举出所有相邻交换的情况,并记 ...

  5. stdafx文件介绍

    MSDN介绍: These files are used to build a precompiled header file Projname.pch and a precompiled types ...

  6. XListview刷新和加载

    //继承IXListViewListenerpublic class MainActivity extends Activity implements OnItemClickListener,IXLi ...

  7. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  8. 转：透析QTP自动化测试框架SAFFRON

    1.为什么要使用框架? 框架是一组自动化测试的规范.测试脚本的基础代码,以及测试思想.惯例的集合.可用于减少冗余代码.提高代码生产率.提高代码重用性和可维护性.例如QTestWare就是QTP自动化测 ...

  9. 表达式语言--在MVC中应用表达式语言

    之前讲解的MVC设计模式中一直有DAO存在,而且所有的对象都保存在VO之中,那么这时如果将一个VO传递到JSP文件中,那么JSP需要导入VO包,如果使用表达式语言的话,导入VO包就没有任何意义了. V ...

  10. HDFS读写程序小测试

    WriteHdfs: package aa; import java.io.*; import org.apache.hadoop.conf.Configuration; import org.apa ...