分享购物网站中常用的一款放大镜效果(产品细节展示)

发现程序猿写博客前都喜欢吐槽一下，也难怪，平时交流少了，内心积累了不少的骚气，是应该适当发泄一下。

哥要发泄了：目前在广州蜂众网效力，这是一家刚创立不久的公司，哥喜欢接触一些新公司，活力充足，发展机会也大。当然有机会去一些知名的大公司（腾讯，百度等），也是非常向往的，这样的镀金公司进去走一趟也学到不少东西。

公司目前做前端的就只有两个鸟人，而我就是其中一个，所以任务也挺多的。这也倒是其次，最主要的是在别人留下的烂摊子搅合，真有点心力交瘁。欣慰的是，在这大半年确实进步了不少，代码质量提高不少。

===============================================吐槽完毕分割线===================================================

今天要分享的是购物网站中常用的一款放大镜效果，效果图如下：

查看效果 源码下载

其实这些插件网上也很多，不过毕竟是自己做的插件，拿出来显摆显摆一下而已，这也是我继续从事IT事业的动力之一。

插件名：	jQuery.imgzoom
兼容情况：	IE6+ chrome Firefox (公司已放弃IE，这是一个明智的决定)
参数说明：	var opts = { lensAuto: true, // 镜头高宽比例跟图片一致 lensWidth: 120, // 镜头宽 lensHeight: 120, // 镜头高 scale: 4, // 放大几倍 loading: 'images/loading.gif' // 大图loading图 } $('...').imgzoom(opts);
功能说明：	1、图片宽高自适应 2、设置lensAuto参数，可使镜头和放大图的高宽比例与图片一致 3、对不符合要求放大图片的一些完善处理（如大图跟展示图一样大等情况）

 

功能不多，却花了我一天的时间，因为要做成插件，多考虑了一些兼容情况及优化了一下代码。在这过程中，以下几个点是花了不少时间思考的：

1、css：图片垂直居中，自己之前总结了网上的几种方案，却漏了最简单的那种(行高等于容器高度)，项目中的代码如下：

div.sg_pbox{width:328px;height:328px;text-align: center;line-height: 328px;font-size: 0;}
div.sg_pbox img{max-width: 328px;max-height: 328px;vertical-align: middle;}

因为IE6不理解max-width,max-height，所以主要是这里不兼容IE6

2、JS：计算镜头和大图的移动，以及镜头和大图宽高比例与展示图一致，自问高中数学不错，没想到在这纠结了。

calculate = function(dImg){ /*相关参数的计算*/
    var $img = $(dImg);
    imgL = $img.offset().left;
    imgT = $img.offset().top;
    imgW = dImg.offsetWidth;
    imgH = dImg.offsetHeight;

    if(lensAuto){
        if(imgW > imgH)    {
            lensW = opts.lensWidth;
            lensH = Math.ceil(imgH * lensW / imgW);
        }else{
            lensH = opts.lensHeight;
            lensW = Math.ceil(imgW * lensH / imgH);
        }    
    }

    viewerW = lensW * scale;
    viewerH = lensH * scale;
    maxW = imgW - lensW;
    maxH = imgH - lensH;
    halfW = lensW / 2;
    halfH = lensH / 2;
};

插件不难，但涉及的一些js基础知识还是挺多的，非常适合新手练习。

文章正文已结束，感谢阅读。如果本文对您有所帮助，请点击推荐一下。

如果对本文有何建议或疑问请留言或加群讨论，前端开发交流群(75701468)

文章属于原创，如需转载请注明文章来源，不胜感激。

文章地址：http://www.cnblogs.com/leolai/p/3544307.html

蜂众网,广州蜂众网,垂直居中,兼容浏览器