jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
这个插件的名字elevatezoom，网址为http://www.elevateweb.co.uk/image-zoom，在github上的项目首页为https://github.com/elevateweb/elevatezoom，建议去github下载，这个网速比较快。
实现这个效果你需要准备两张图片，一张小的，一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性，其值为大图的地址，最后在javascript中选择该图片调用elevateZoom()就可以了。
下面给出一个例子(在github下载的代码中有这个例子)：
<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插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)的更多相关文章
- 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能
转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- JQuery鼠标移到小图显示大图效果的方法
JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料 axure7.0 方法/步骤 下载需要轮播的图片 将图片引入至axure中,将引入的第一张图片转为 ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- 【分享】jQuery无插件实现 鼠标拖动图片切换 功能
前言 我就想随便叨逼叨几句,爱看就看几句,不爱看就直接跳过看正文就好啦~ 这个方法是仿写页面时我自己研究出来,可能有比我更简单的方法. 但我不管,因为我没查我不知道,我就觉得我的最好啦,耶耶耶~ 效果 ...
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- Jquery插件开发之图片放大镜效果(仿淘宝)
原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- 约会安排---hdu4553（线段树，麻烦的区间覆盖）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4553 算是poj3667的加强版,建立两颗线段树,一个是DS区间,另一个是NS区间.那么根据题意, ...
- ovn-sb 摘要
1.Database Structure Physical network table中包含了和chassis nodes有关的所有信息,包括用于overlay所需的IP地址,支持的tunnel类型以 ...
- day08：软件系统的体系结构&Tomcat详解&Web应用&http协议
day08 软件系统体系结构 常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端 ...
- LVS和nginx反向代理网站架构
LVS和nginx反向代理网站架构 nginx反向代理和lvs的dr都存在单点,要keepalived做高可用,但是成本高了 f
- MOPSO 多目标粒子群优化算法
近年来,基于启发式的多目标优化技术得到了很大的发展,研究表明该技术比经典方法更实用和高效.有代表性的多目标优化算法主要有NSGA.NSGA-II.SPEA.SPEA2.PAES和PESA等.粒子群优化 ...
- python weekday()函数
def weekday(self): """Return the day of the week as an integer, where Monday is 0 and ...
- ehcache实现页面整体缓存和页面局部缓存
之前写过spring cache和ehcache的基本介绍和注解实现缓存管理,今天记录下web项目的页面缓存技术. 页面缓存是否有必要?. 这样说吧,几乎所有的网站的首页都是访问率最高的,而首页上的数 ...
- nmon监控Linux服务器系统资源
本文转自:http://www.cnblogs.com/hyzhou/archive/2011/12/29/2305860.html 在实际的测试过程中,Loadrunner监控Linux系统资源不太 ...
- HTTP--TCP连接
几乎所有的 HTTP 通信都是由 TCP/IP 承载的,TCP/IP 是全球计算机及网络 设备都在使用的一种常用的分组交换网络分层协议集.客户端应用程序可以打开一 条 TCP/IP 连接,连接到可能运 ...
- 使用MongoVUE无法添加Collection
说明: 问题MongoDB版本为3.2,MongoVUE 1.6.9 问题: 在数据库中添加集合不可用. 解决方法: MongoDB版本换成2 或者 切换存储引擎: 从MongoDB 3.2 版本开始 ...