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


Posted in Javascript onFebruary 04, 2013

这个插件的名字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插件实现鼠标经过图片右侧显示大图的效果(类似淘宝) 
具体代码没有研究,只是知道怎么使用了,特在此分享一下。
Javascript 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 #Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 #Javascript
实现局部遮罩与关闭原理及代码
Feb 04 #Javascript
js实现网站首页图片滚动显示
Feb 04 #Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 #Javascript
js网页中的(运行代码)功能实现思路
Feb 04 #Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 #Javascript
You might like
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
如何在PHP中使用数组
2020/06/09 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python之循环结构
2019/01/15 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
技校毕业生自荐信
2014/06/03 职场文书
国庆节标语大全
2014/10/08 职场文书
个人总结格式范文
2015/03/09 职场文书
中学语文教学反思
2016/02/16 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL