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指向一个大图地址,则即可实现图片的放大镜效果。

本实例插件js已经被稍微修改了一下。

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[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-实现图片的放大镜显示效果的更多相关文章

  1. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  2. jQuery插件:图片放大镜--jQuery Zoom

    本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,m ...

  3. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  4. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  5. jquery 放大图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  7. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  8. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  9. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

随机推荐

  1. 2012全球SEO行业调查报告

    这份报告是SEOmoz对每两年一度举办的SEO行业调查进行的分析数据,上次调查是在2010年.该调查,主要围绕SEO从业人员的特征.工作内容时间分配比例.SEO相关消费和预算.对未来市场的看法.seo ...

  2. Impala中多列转为一行

    之前有一位朋友咨询我,Impala中怎样实现将多列转为一行,事实上Impala中自带函数能够实现,不用自己定义函数. 以下我開始演示: -bash-4.1$ impala-shell Starting ...

  3. 双向链表LinkedList使用

    LinkedList是传统意义上的链表也就是双向链表.每个元素都是节点,都可以指向下一级 在前添加,在后添加: mSource.AddLast(...) mSource.AddFirst(...) 在 ...

  4. Linux_Command

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  5. Jenkins ssh 部署war到tomcat 虚拟目录

    1>完成Jenkins服务环境的搭建,此处不再详述,不会的童鞋可参考下面的博客 http://www.cnblogs.com/zz0412/tag/jenkins/ 2>安装Publish ...

  6. idea编译修改jdk版本

    由于项目需要,需要修改jdk的版本为1.8,这里记录一下修改的地方 1,项目的jdk版本 右键点击项目-> open module setting ->project,然后如图所示 2,在 ...

  7. mogndb 慢查询

    0  摘要 在MySQL中,慢查询日志是经常作为我们优化查询的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是开启Profiling功能.该工具在运行的实例上收集有关MongoDB的 ...

  8. COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔

    本站文章均为李华明Himi原创,转载务必在明显处注明:(作者新浪微博:@李华明Himi) 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos2d- ...

  9. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  10. 【BZOJ】3399: [Usaco2009 Mar]Sand Castle城堡(贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3399 贪心就是将两组排序,然后直接模拟即可.. 如果我们用a去匹配一个绝对值和它差不多的值,那么去匹 ...