jQuery 图片放大镜效果插件：jQZoom

在一些产品演示网站，常常需要这样的效果，把鼠标移到小图的上面，旁边出现这这部分的放大效果，通过这种方式让用户能够详细了解产品的细节。

jQZoom 就是这样的一个 jQuery 插件，它能够让你网站的图片实现放大镜效果，把鼠标移到小图上，旁边出现大图的局部放大的部分，如下演示：

jQZoom 演示

RSS 用户需要返回页面才能看到效果。

jQZoom 使用说明

下面介绍下简单使用：

1. 加载 jqzoom.css

  
<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 加载 jQzoom 和 jQuery JS 库：

  
<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3. 通过下面的方式来创建 jQZoom 的 HTML 代码。

  
<a href="images/BIGIMAGE.JPG" class="jqzoom" title="MYTITLE">
	<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE">
</a>

其中：
SMALLIMAGE.JPG: 小图
BIGIMAGE.JPG: 大图，注意小图一定要是大图的缩略图。
MYCLASS: 后面用来查找需要实现 jQZoom 效果的元素。
MYTITLE/IMAGE TITLE: A 标题的标题或者图片的标题，将会用在放大之后图片的标题。

4. 当页面导入的时候，载入 jQZoom 插件。

  
$(document).ready(function(){ 
	$(".jqzoom").jqueryzoom(); 
});

基本设置好了，当然你也可以自己做些简单的设置：

  
$(document).ready(function(){
	var options = {
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            zoomWidth: 300,
            zoomHeight: 250,
            xOffset:90,
            yOffset:30,
            position:'left'
            //...MORE OPTIONS
	};
	$('.MYCLASS').jqzoom(options);
});

下载： jQZoom。
演示： jQuery 图片放大镜效果插件：jQZoom

>>> 继续阅读全文 ...

欢迎关注我们关于 WordPress 技巧的微博： 新浪微博       腾讯微博

© 我爱水煮鱼 / 6条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

• jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
• jQuery 跟随滚动插件：Sidebar Follow
• Happy.js：轻量级的 jQuery 表单验证插件
• 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
• 轻量级的移动 Web 应用开发框架：Sidetap
• GMaps.js：让你快速集成 Google Maps 服务的 jQuery 插件