jQuery插件：图片放大镜——jQuery Zoom

最新推荐文章于 2024-08-23 08:47:18 发布

记录的习惯

最新推荐文章于 2024-08-23 08:47:18 发布

阅读量5.5k

点赞数

分类专栏： jQuery 文章标签： jquery插件 jQuery Zoom 图片缩放

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这是一款非常不错的给图片添加放大镜效果，可以应用在诸如zen cart、magento电子商场之类的开源项目上。如果想看它的效果，你可以直接访问：

http://www.mind-projects.it/projects/jqzoom/demos.php

觉得不错就下载一个玩玩吧！jQuery出来的插件都是非常容易使用的。也可以当做学习的示例。

【如何安装】

① 先在网页中包含jQuery文件，然后再包含jQZoom的文件，如下：

<script type='text/javascript' src='js/jquery-1.4.2.js'></script> 
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

② 然后再将jqzoom.css添加到网页中：

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

【如何使用】

使用是很简单的，先指定一个<a>标签，指向一个大的图片，里面包含一个小图片：

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

■ SMALLIMAGE.JPG：这个是默认用户看见的图片，也就是之后被放大的图片；

■ BIGIMAGE.JPG：放大镜所看到的图片；

■ MYCLASS：Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用来标识这个<a>标签要应用放大镜功能，之后我们可以通过class选择器来选择所有的要应用jQZoom 的<a>标签。

■ MYTITLE/IMAGE TITLE：这些文本它们会被显示在放大镜窗口上。

准备工作做完了，现在可以通过下面的简单代码来调用jQZoom：

$(document).ready(function(){ 
    $('.MYCLASS).jqzoom(); 
});

这样只是使用jQZoom的标签模式，事实上它有更多的参数可以设置，以获得更多的效果，看下面的示例：

$(document).ready(function(){ 
    var options = { 
        zoomWidth: 300, 
        zoomHeight: 250, 
        xOffset: 10, 
        yOffset: 0, 
        position: "right" //and MORE OPTIONS 
	}; 
    $('.MYCLASS).jqzoom(options); 
});

原文http://blog.csdn.net/xinhaozheng/article/details/4085644