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实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
php 保留字列表
2012/10/04 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
js实现的网页颜色代码表全集
2007/07/17 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python简单读取大文件的方法
2016/07/01 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
关于赌博的检讨书
2014/01/24 职场文书
合作协议书模板2014
2014/09/26 职场文书
欢迎新生标语
2014/10/06 职场文书
趵突泉导游词
2015/02/03 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
django中websocket的具体使用
2022/01/22 Python