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

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

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

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

【如何安装】

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

 
 

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

【如何使用】

使用是很简单的,先指定一个标签,指向一个大的图片,里面包含一个小图片:

 
	 
 

■ 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).用来标识这个标签要应用放大镜功能,之后我们可以通过class选择器来选择所有的要应用jQZoom 的标签。

■ 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

你可能感兴趣的:(jQuery)