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 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- 转！！git如何撤销上一次commit(或已push)
原博文地址 : https://www.cnblogs.com/lyy-2016/p/6509707.html git如何撤销上一次commit操作 1.第一种情况:还没有push,只是在本地comm ...
- 人人网张铁安：Feed系统架构分析（转）
原文:http://www.csdn.net/article/2010-07-26/277273 继成功举办首期TUP活动后,日前在北京丽亭华苑酒店鸿运二厅,由CSDN和<程序员> 杂志联 ...
- CEO 是一家创业公司的天花板
大家说是不是呢?一秒钟内看到本质的人,和半辈子也看不清一件事本质的人,自然是不一样的命运.
- QQ-AR助人教版小学英语“动”起来
日前,人教数字出版公司与腾讯QQ达成合作,将以小学英语3-6年级8本课本为合作试点,共同推出全国首个可AR识别的课本,在QQ-AR的帮助下,课本也能“动”起来,更加生动立体地展现在孩子眼前,让学习变得 ...
- 《Java程序猿面试笔试宝典》之Java程序初始化的顺序是如何的
在Java语言中.当实例化对象时.对象所在类的全部成员变量首先要进行初始化,仅仅有当全部类成员完毕初始化后,才会调用对象所在类的构造函数创建对象. Java程序的初始化一般遵循以下三个原则(以下 ...
- java static成员变量方法和非static成员变量方法的区别
这里的普通方法和成员变量是指,非静态方法和非静态成员变量首先static是静态的意思,是修饰符,可以被用来修饰变量或者方法. static成员变量有全局变量的作用 非static成员变量则 ...
- C# Winform backgroundWorker组件使用
BackgroundWorker 组件用来执行诸如数据库事务.文件下载等耗时的异步操作. 开始 在应用程序中添加一个BackgroundWorker实例,如果用的是VS,可以从工具上直接拖到应用程序: ...
- 忘记oracle的sys用户密码怎么修改以及Oracle 11g 默认用户名和密码
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- 【转载】package-info
本文是转载,原文地址:http://strong-life-126-com.iteye.com/blog/806246 package-info.java对于经常使用外部包的程序员来说应该是熟悉陌生人 ...
- i春秋之荒岛求生write-up
i春秋之荒岛求生write-up 第一关 这一关的答案是在题目的最后一句加粗的 躺平等死 和 勇敢战斗 中进行选择,结合前文中提到的 如果你想出去,就必须打败他们 自然得出答案是 勇敢战斗 . 第二关 ...