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 相关文章推荐
JavaScript的原型继承详解
Feb 15 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
简单实现js拖拽效果
Jul 25 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue数据绑定实例写法
Aug 06 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
第十四节 命名空间 [14]
2006/10/09 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python学生管理系统
2019/01/30 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python 递归相关知识总结
2021/03/03 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
视光学专业自荐信
2014/06/24 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
个人德育工作总结
2015/03/05 职场文书
工程项目合作意向书
2015/05/08 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
《火烧云》教学反思
2016/02/23 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
一条慢SQL语句引发的改造之路
2022/03/16 MySQL