jQuery-实现图片的放大镜显示效果
jQuery-实现图片的放大镜显示效果
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=85
网上购物日趋流行,商品的图片很重要,一个页面上信息量很大,商品图片必然大小有限,很流行的做法是鼠标移动到图片上,图片放大显示,例如:淘宝。
然而,这里只是单纯的放大,如果能够实现移动放大,局部放大,那么效果会更上一层楼。这里,即将展示的就是类似于放大镜效果的图片局部放大效果。
先看效果截图:
点击进入:效果演示页面(含文件打包下载)
使用的固定模式是a标签里面嵌套img标签,a标签href指向放大的图片路径。要想哪张图片放大镜显示,就直接调用哪张图片。例如:
jQuery.noConflict();
jQuery(document).ready(function(){
$(“img.zxx_zoom_image”).jqueryzoom();
});
表示class为zxx_zoom_image的img将调用图片放大的js函数,如果其父标签为a标签,且href指向一个大图地址,则即可实现图片的放大镜效果。
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=85
转自:http://www.zhangxinxu.com/wordpress/2009/08/jquery-%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E7%9A%84%E6%94%BE%E5%A4%A7%E9%95%9C%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C/
jQuery-实现图片的放大镜显示效果的更多相关文章
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- jQuery插件:图片放大镜--jQuery Zoom
本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
- jquery 放大图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
随机推荐
- 2012全球SEO行业调查报告
这份报告是SEOmoz对每两年一度举办的SEO行业调查进行的分析数据,上次调查是在2010年.该调查,主要围绕SEO从业人员的特征.工作内容时间分配比例.SEO相关消费和预算.对未来市场的看法.seo ...
- Impala中多列转为一行
之前有一位朋友咨询我,Impala中怎样实现将多列转为一行,事实上Impala中自带函数能够实现,不用自己定义函数. 以下我開始演示: -bash-4.1$ impala-shell Starting ...
- 双向链表LinkedList使用
LinkedList是传统意义上的链表也就是双向链表.每个元素都是节点,都可以指向下一级 在前添加,在后添加: mSource.AddLast(...) mSource.AddFirst(...) 在 ...
- Linux_Command
系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...
- Jenkins ssh 部署war到tomcat 虚拟目录
1>完成Jenkins服务环境的搭建,此处不再详述,不会的童鞋可参考下面的博客 http://www.cnblogs.com/zz0412/tag/jenkins/ 2>安装Publish ...
- idea编译修改jdk版本
由于项目需要,需要修改jdk的版本为1.8,这里记录一下修改的地方 1,项目的jdk版本 右键点击项目-> open module setting ->project,然后如图所示 2,在 ...
- mogndb 慢查询
0 摘要 在MySQL中,慢查询日志是经常作为我们优化查询的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是开启Profiling功能.该工具在运行的实例上收集有关MongoDB的 ...
- COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔
本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d- ...
- 第一百六十节,封装库--JavaScript,ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- 【BZOJ】3399: [Usaco2009 Mar]Sand Castle城堡(贪心)
http://www.lydsy.com/JudgeOnline/problem.php?id=3399 贪心就是将两组排序,然后直接模拟即可.. 如果我们用a去匹配一个绝对值和它差不多的值,那么去匹 ...