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 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- 测试命令运行时间：timeit和profile
先说timeit from timeit import Timer def test1(): n=0 for i in range(101): n+=i return n def test2(): r ...
- EasyUI Pagination 分页
通过 $.fn.pagination.defaults 重写默认的 defaults. 分页(pagination)允许用户通过翻页导航数据.它支持页面导航和页面长度选择的可配置选项.用户可以在分页的 ...
- ZOJ Monthly, January 2019
A: Little Sub and Pascal's Triangle Solved. 题意: 求杨辉三角第n行奇数个数 思路: 薛聚聚说找规律,16说Lucas 答案是 $2^p \;\;p 为 n ...
- uva11324 有向图的强连通分量+记忆化dp
给一张有向图G, 求一个结点数最大的结点集,使得该结点集中任意两个结点u和v满足,要么u可以到达v, 要么v可以到达u(u和v相互可达也可以). 因为整张图可能存在环路,所以不好使用dp直接做,先采用 ...
- Android ANR异常及解决方法
1,首先是查看log: 2,再看trace.txt; 3,看源码: 4,仔细分析ANR的原.
- 项目管理工具- Maven
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0" xmlns:xsi="http://www.w3. ...
- php 发送邮件类
//******************** 配置信息 ******************************** $smtpserver = "smtp.263 ...
- RocEDU.阅读.写作《苏菲的世界》书摘(七）
* 康德认为"事物本身"和"我眼中的事物"是不一样的.这点很重要.我们永远无法确知事物"本来"的面貌.我们所知道的只是我们眼中"看 ...
- FromBottomToTop团队项目总结
FromBottomToTop团队项目总结 项目实现情况 关于塔防游戏项目,已实现下列内容 - 游戏设有菜单,附有简介与游戏玩法 - 游戏设有不同的场景地图可供玩家选择 - 通过智能算法,计算小怪的路 ...
- 什么是TensorFlow Serving
答:1. 从Serving 可以看出,与服务有关; 2. 那么为啥还有TensorFlow的前缀?肯定与TensorFlow有着很大的关系: 3. 那么Tensorflow是用来干什么的呢?Tenso ...