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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
vue.js中created方法作用
Mar 30 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
js实现聊天对话框
Feb 08 Javascript
详解JavaScript的this指向和绑定
Sep 08 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
制作美丽的拉花
2021/03/03 冲泡冲煮
基于xcache的配置与使用详解
2013/06/18 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
python脚本爬取字体文件的实现方法
2017/04/29 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python 动态调用函数实例解析
2019/10/21 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
初中学校军训方案
2014/05/09 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
转让协议书
2015/01/27 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
实习单位推荐信
2015/03/27 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
承诺书范本大全
2015/05/04 职场文书
新学期家长寄语2016
2015/12/03 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS