这个插件的名字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> 

实现的效果如下： 

 
 

具体代码没有研究，只是知道怎么使用了，特在此分享一下。

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)的更多相关文章

  1. 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

    转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...

  2. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  3. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...

  4. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  5. axure 动态面板实现图片轮播效果（淘宝）

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

  6. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  7. 【分享】jQuery无插件实现 鼠标拖动图片切换 功能

    前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...

  8. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  9. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

随机推荐

  1. nginx：服务器集群

    一.Nginx的事件处理机制 对于一个基本的web服务器来说,事件通常有三种类型,网络事件.信号.定时器. 首先看一个请求的基本过程:建立连接---接收数据---发送数据 . 再次看系统底层的操作 : ...

  2. 提高myEclipse的开发效率和外观，这些你都设置了吗？

    [前言] 为什么我的myeclipse开启速度那么慢,为什么别人能哗啦啦几个快捷键打出一片代码?刚开始使用myeclipse的时候,相信大家都有这个疑问,慢慢的,也懂得一些配置,我也不例外,在此,把常 ...

  3. OPENSSL编程 (secure shell, ssh)

    很好的 OPENSSL编程 教程,名字就叫“OPENSSL编程” 它里面还有很多关于密码学的东西. http://www.pengshuo.me http://www.pengshuo.me/2014 ...

  4. in 和 or 的效率问题

    select * from table where col in (2,3,4,5,6) select * from table where col=2 or col=3 or col=4 or co ...

  5. jvm启动

    首先使用 Java 命令启动JVM 其次进行JVM配置的装载——根据当前路径和系统的版本去寻找jvm.cfg文件,装载配置. 每种需要java虚拟机的软件,都会带一个jvm.cfg.然后jvm.cfg ...

  6. #C++初学记录（素数判断）

    练习题目二 素数判断 A prime number is a natural number which has exactly two distinct natural number divisors ...

  7. 牛客国庆集训派对Day7 Solution

    A    Relic Discovery 水. #include <bits/stdc++.h> using namespace std; int t, n; int main() { s ...

  8. Digital Image Processing 学习笔记1

    第一章 1.1 数字图像 一幅图像可以定义为一个而为函数, 其中x和y是空间坐标,而在任何一对空间坐标(x, y)处的幅值f称为图像在该点处的强度或灰度.当x, y和灰度值f是有限的离散数值时,该图像 ...

  9. [3140] Sublime Text 2.x, 3.x 通用注册码、密钥集合

    [3140] Sublime Text 2.x, 3.x Universal License Keys collection for Win, Mac & Lin 所有这些许可证密钥都被测试( ...

  10. 20145307陈俊达《网络对抗》Exp3 免杀原理与实践

    20145307陈俊达<网络对抗>Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 恶意代码中一般会有一段有较明显特征的代码也就是特征码,如果杀毒软件检测到有程序包含的 ...