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

（本篇完）

如果您觉得本文的内容对您的学习有所帮助：

纯js无图片无外链CSS图片幻灯片播放插件 (0.959)
jQuery-单击文字或图片内容放大显示效果插件 (0.874)
酷酷的jQuery鼠标悬停图片放大切换显示效果 (0.752)
Apple iphone4官网图片“视网膜”放大效果实现 (0.657)
jQuery-很酷的弹出层效果js插件 (0.343)
jQuery-实现图片投影效果的js插件 (0.302)
jQuery - 鼠标经过(hover)事件的延时处理 (0.302)
MooTools和jQuery库继承实现class切换对比 (0.271)
JavaScript实现新浪微博文字放大显示动画效果 (0.217)
jQuery-鼠标经过显示大图并跟随鼠标效果插件 (0.216)
介绍：cssrefresh.js-CSS文件自动刷新 (RANDOM - 0.041)

分享到：

0

这篇文章发布于 2009年08月30日，星期天，21:25，归类于 jquery相关。阅读 19730 次, 今日 3 次

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。