京东商城好帮手：jQuery 图像放大插件-技术开发专区

京东商城好帮手：jQuery 图像放大插件

作者：皮丽华编辑：皮丽华 2012-01-13 00:00 IT168网站原创

【IT168 技术】喜欢在京东商城上购物的朋友们，如何快速淘到自己想要的商品呢?相信大多数人还是喜欢看图淘宝吧!京东商城产品展示页支持多图切换并放大代码，放大功能的核心代码为jQzoom，当把鼠标移到下边的小图上的时候，上边显示大图片，当把鼠标放到大图片上，右侧则出现鼠标对应地方的大图片，方便查看产品细节，比较适合网店产品展示。

　　JQZoom 是一个JavaScript图像放大镜，内置在流行的jQuery JavaScript框架顶部。jQzoom 功能非常强大，操作较为简单。支持标准模式、反转模式、无镜头、无标题的放大，并可以自定义jQZoom的窗口位置和渐隐效果，修正IE6的select bug。

我们先来看看具体的Demo效果演示：

Standard zoom with thumbnails

01.$(document).ready(function(){
02. $('a#demo1').jqzoom();
03.});

Reverse zoom

01.$(document).ready(function(){
02. $('a#demo2').jqzoom({
03. zoomType: 'reverse'
04. });
05.});

Drag zoom

$(document).ready(function(){
                            $('a#demo3').jqzoom({
                                                    zoomType: 'drag'
                                                });
                    });
Inner zooom
01.$(document).ready(function(){
02.           $('a#demo4').jqzoom({
03.                                zoomType: 'innerzoom'
04.                            });
05.});

Always on zoom

01.$(document).ready(function(){
02.            $('a#demo5').jqzoom({
03.                                    zoomType: 'standard',
04.                                    alwaysOn : true
05.                            });
06.
07.});
Resize,zoom popup custom position, fadein, fadeout effects
01.$(document).ready(function(){
02.     $('a#demo6').jqzoom({
03.            zoomType: 'standard',
04.            alwaysOn : false,
05.            zoomWidth: 250,
06.            zoomHeight:200,
07.            position:'left',
08.            xOffset: 30,
09.            yOffset:80,
10.            showEffect : 'fadein',
11.            hideEffect: 'fadeout'
12.        });
13.  });

　　以上Demo演示：http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

安装

　先添加最新发布的jQuery，再添加jQZoom脚本，记住顺序，参考以下代码

01.<script type='text/javascript' src='js/jquery-1.5.xx.js'></script>
02.<script type='text/javascript' src='js/jquery.jqzoom-core.js'></script>

在文件头添加jqzoom.css

　　如何使用jQZoom

　　jQZoom的使用非常简单，但是你需要指定HTML锚元素，以便这块区域可以生成扩大的图片。

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

　　锚元素包含了你想要缩放的图片：

　　SMALLIMAGE.JPG：代表你想要缩放的小图片
　　BIGIMAGE.JPG：代表缩放后的大图片
　　MYCLASS：代表Anchor类，用来实例化与该类相匹配的jQZoom脚本
　　MYTITLE/IMAGE TITLE：Anchor标题或者图片标题可以用来显示与jQZoom窗口相近的缩放标题。

　　加载插件

1. $(document).ready(function(){

　　2. $('.MYCLASS').jqzoom();

　　3. });

　　这将实例化默认的jQzoom模式。你可以设置更多的选项来创建用户自定义的效果。具体实例如图所示。

　1. $(document).ready(function(){

　　2. var options = {

　　3. zoomType: 'standard',

　　4. lens:true,

　　5. preloadImages: true,

　　6. alwaysOn:false,

　　7. zoomWidth: 300,

　　8. zoomHeight: 250,

　　9. xOffset:90,

　　10. yOffset:30,

　　11. position:'left'

　　12. //...MORE OPTIONS

　　13. };

　　14. $('.MYCLASS').jqzoom(options);

　　15. });

　　支持多个缩略图

　　如果你想创建库，jQzoom可以帮助你管理这个库。

　　1.声明主要的anchor”rel”属性

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

　　2.管理你的缩略图“class”和”rel”属性

01.<a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}">
02. <img src="imgProd/thumbs/THUMBIMG1.jpg">
03.</a>

　　jQzoom可以将"zoomThumbActive"添加至缩略图中。默认情况下将这个类指定给被选中的缩略图中。

　　缩略图架构中rel属性非常重要，基本属性如下：

　　gallery: 所属 gallery ID

　　smallimage: 点击缩略图时执行SMALLIMAG的路径

　　largeimage: 指向LARGEIMAG的路径

rel="{gallery: 'gal1', smallimage: './imgProd/SMALLIMAGE1.jpg',largeimage: './imgProd/LARGEIMAGE1.jpg'}"

具体配置信息：见图

▲

关注我们