简单写一个商城放大镜插件(仿京东)

本文固定链接：https://blog.csdn.net/u011135729/article/details/79642425转载请注明出处

案例下载https://github.com/jiuxiangfeng/jxfzoomy

背景：

最近工作相对有点清闲，想到业务系统写久了，写前端页面很手生，就想做个商品详情页面随便练练手，当整个页面搭建的差不多了，具体实现放大镜效果时候，本想着随便找个插件弄一下得了，但是找了许久（花了一早上，懒得找了），没有找到自己所想要的（其实有很多下载收费，不过想到口袋有点瘪…）。这里简单说下我理想中的商城放大镜的实现（这只是我自己的想法，如有理解不对的地方，还望指正，谢谢）。

1、放大镜图片应分三级（图1缩略图、图2小图、图3大图）

2、图片不应该变形，而是按原图比例居中显示

3、缩略图的数量是可变的，且数量如果过多，则应该有部分隐藏，通过左右箭头来移动，缩略图较少占用宽度较小，应居中缩略图

gif演示：

使用介绍：

1、支持ie8+，及各现代浏览器（ie7勉强也可以用，ie6没测试）

2、此插件基于jquery，使用前需引用jquery（版本我这里用1.9.1开发的）、jxfzoomy.js、jxfzoomy.css

3、可以传入的参数（json对象形式）

smallBoxW      //小图框的宽 单位px 默认250px

smallBoxH      //小图框的高 单位px 默认250px

bigBoxW          //大图放大镜框的宽 单位px 默认350px

bigBoxH          //大图放大镜框的高 单位px 默认350px

smallListImgW      //缩略图的宽 单位px 默认50px

smallListImgH      //缩略图的高 单位px 默认50px

moveSpeed          //缩略图点击左右方向键移动的速度 单位px 默认50px

4、html必须格式

<!-- 基本格式 -->

< div id= "容器ID" class= 'jxfzoomy-container' >

< div class= "jxfzoomy-thumb-box" >

< div class= "jxfzoomy-thumb-ct" >

< ul class= 'jxfzoomy-list-img jxfzoomy-clearfix' >

<!-- 有jxfzoomy-active为当前选中的图片 data-smallImg属性为小图路径

data-bigImg属性为大图路径 <li>标签内部的img为缩略图 -->

< li class= 'jxfzoomy-active' data-smallImg= "images/0_min.jpg" data-bigImg= "images/0_big.jpg" >

< div >< img src= "images/0_thumb.jpg" alt= "" ></ div >

</ li >

< li data-smallImg= "images/1_min.jpg" data-bigImg= "images/1_big.jpg" >

< div >< img src= "images/1_thumb.jpg" alt= "" ></ div >

</ li >

< li data-smallImg= "images/2_min.jpg" data-bigImg= "images/2_big.jpg" >

< div >< img src= "images/2_thumb.jpg" alt= "" ></ div >

</ li >

< li data-smallImg= "images/3_min.jpg" data-bigImg= "images/3_big.jpg" >

< div >< img src= "images/3_thumb.jpg" alt= "" ></ div >

</ li >

< li data-smallImg= "images/4_min.jpg" data-bigImg= "images/4_big.jpg" >

< div >< img src= "images/4_thumb.jpg" alt= "" ></ div >

</ li >

< li data-smallImg= "images/5_min.jpg" data-bigImg= "images/5_big.jpg" >

< div >< img src= "images/5_thumb.jpg" alt= "" ></ div >

</ li >

</ ul >

</ div >

</ div >

</ div >

5、注册控件

//页面加载完毕后执行

$(document).ready( function(){

// $('#container').jxfZoomy({

// smallBoxW: 350,//小图框的宽 单位px 默认250px

// smallBoxH: 250,//小图框的高 单位px 默认250px

// bigBoxW: 450, //大图放大镜框的宽 单位px 默认350px

// bigBoxH: 350, //大图放大镜框的高 单位px 默认350px

// smallListImgW:80,//缩略图的宽 单位px 默认50px

// smallListImgH:50,//缩略图的高 单位px 默认50px

// moveSpeed:100 //缩略图点击左右方向键移动的速度 单位px 默认50px

// });

$( '#container').jxfZoomy(); //默认

});

完整代码：

jxfzoomy.css

.jxfzoomy-container ul{
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
}
.jxfzoomy-container img{
    vertical-align: top;
}
.jxfzoomy-container{
    position: relative;
    margin-left: 100px;
    margin-top: 50px;
}
.jxfzoomy-small-box{
    position: relative;
    border: 1px solid #ccc;
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
/* .jxfzoomy-small-box i{
    height: 100%;
    display:inline-block;
    vertical-align: middle;
} */
.jxfzoomy-small-box-move{
    display:inline-block;
    position: relative;
    vertical-align: middle;
}
.jxfzoomy-small-box .mask{
    position: absolute;
    background-color: #000;
    display: none;
    cursor: move;
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}
.jxfzoomy-big-box{
    position:absolute;
    border: 1px solid #ccc;
    overflow: hidden;
    width:0;
    height: 0;
}
.jxfzoomy-big-box .jxfzoomy-big-img{
    position:absolute;
}
.jxfzoomy-thumb-box{
    position: relative;
    margin-right: 20px;
    overflow: hidden;
}
.jxfzoomy-thumb-lt{
    position: absolute;
    text-align: center;
    left: 0;
    /* border: solid 1px #bbb; */
    margin-top: 5px;
    width: 13px;
    height: 50px;
    line-height: 50px;
    color:#999;
    cursor: pointer;
    /* border-radius: 5px 0 0 5px; */
    font-weight: bold;
    font-size: 28px;
    font-family: '黑体';
}
.jxfzoomy-thumb-gt{
    position: absolute;
    text-align: center;
    right:0;
    /* border: solid 1px #bbb; */
    margin-top: 5px;
    width: 13px;
    height: 50px;
    line-height: 50px;
    color:#999;
    cursor: pointer;
    /* border-radius: 0 5px 5px 0; */
    font-weight: bold;
    font-size: 28px;
    font-family: '黑体';
}
.jxfzoomy-thumb-ct{
    overflow: hidden;
}
.jxfzoomy-list-img{
    float:left;
    width: 5000px;
    margin-top: 5px;
}
.jxfzoomy-list-img .jxfzoomy-active{
    border:solid 1px red;
}
.jxfzoomy-list-img li{
    float: left;
    margin-left: 5px;
    border: 1px solid #eee;
}
.jxfzoomy-list-img li div{
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
/* .jxfzoomy-list-img li img{
    max-width: 50px;
    max-height: 50px;
} */
.jxfzoomy-clearfix:before,.jxfzoomy-clearfix:after { content: ""; display: table; }
.jxfzoomy-clearfix:after { clear: both; }
.jxfzoomy-clearfix { *zoom: 1;clear: both; }

jxfzoomy.js

(function($){
    $.fn.jxfZoomy = function(){
        return $.fn.jxfZoomy.methods['init'].apply(this,arguments);
    };
    /*配置信息*/
    $.fn.jxfZoomy.option = {
        smallBoxW: 250,
        smallBoxH: 250,
        bigBoxW: 350,
        bigBoxH: 350,
        smallListImgW:50,
        smallListImgH:50,
        moveSpeed: 50
    }
    $.fn.jxfZoomy.methods = {
            configPara:{},
            init: function (optionTemp) {
                var option = $.extend({}, $.fn.jxfZoomy.option, optionTemp);
                $.fn.jxfZoomy.option = option;
                var configPara = $.fn.jxfZoomy.methods.configPara;
                //容器
                configPara.$container = this;

                //初始化参数
                var html = "";
                html+='<div class="jxfzoomy-small-box">';
                html+='    <div class="jxfzoomy-small-box-move">';
                html+='        <img class="small-img" style="width:10px" src="'+$('.jxfzoomy-active').attr('data-smallImg')+'" alt="">';
                html+='        <div class="mask"></div>';
                html+='    </div>';
                html+='</div>';
                html+='<div class="jxfzoomy-big-box">';
                html+='<img id="jxfzoomy-big-img" class="jxfzoomy-big-img" src="'+$('.jxfzoomy-active').attr('data-bigImg')+'" alt="">';
                html+='</div>';
                $(html).insertBefore(configPara.$container.find('.jxfzoomy-thumb-box'));

                //小图
                configPara.$smallImg = configPara.$container.find('.small-img');
                //小图框
                configPara.$smallBox = configPara.$container.find('.jxfzoomy-small-box');
                //大图
                configPara.$bigImg = configPara.$container.find('.jxfzoomy-big-img');
                //大图框
                configPara.$bigBox = configPara.$container.find('.jxfzoomy-big-box');
                //遮罩
                configPara.$mask = configPara.$container.find('.mask');

                //初始化大框（放大的那个框）
                $.fn.jxfZoomy.methods.initBigBox();
                //初始化小图
                $.fn.jxfZoomy.methods.initSmallImg();
                //初始化左右箭头
                $.fn.jxfZoomy.methods.initArrows();
                //小缩略图（很多张的那个）
                $.fn.jxfZoomy.methods.initSmallListImg();
                //绑定事件
                $.fn.jxfZoomy.methods.bindEvent();
                //初始化大图
                document.getElementById('jxfzoomy-big-img').onload = function () {
                    //初始化小图
                    $.fn.jxfZoomy.methods.initSmallImg();
                    //初始化遮罩
                    $.fn.jxfZoomy.methods.initMask();
                    $.fn.jxfZoomy.methods.bindEvent2();
                }
                //不知道为什么ie浏览器进来没有触发上面的document.getElementById('jxfzoomy-big-img').onload，所以代码点击一下当前的小缩略图
                if (!!window.ActiveXObject || "ActiveXObject" in window){
                    $('.jxfzoomy-active').click();
                }
                //$('.jxfzoomy-active').click();
                return this;
            },
            initBigBox: function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                configPara.$smallBox.css({
                    'width': option.smallBoxW,
                    'height': option.smallBoxH
                });
                configPara.$bigBox.css({
                    'border-width':0,
                    'left': option.smallBoxW + 5,
                    'top': 0
                });
            },
            initSmallImg:function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                if(configPara.$smallImg.width() > configPara.$smallImg.height()){
                    configPara.$smallImg.css({'width':option.smallBoxW ,'height':'auto'});
                }else{
                    configPara.$smallImg.css({'width':'auto','height':option.smallBoxH });
                }
            },
            initArrows:function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                $('<div class="jxfzoomy-thumb-lt"><</div><div class="jxfzoomy-thumb-gt">></div>')
                .insertBefore(configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct'));
                configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt,.jxfzoomy-thumb-box .jxfzoomy-thumb-gt')
                .css({
                    'height':option.smallListImgH,
                    'line-height':option.smallListImgH + 'px'
                });
            },
            initSmallListImg:function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                configPara.$container.find('.jxfzoomy-thumb-box').css({
                    'width':option.smallBoxW
                });
                configPara.$container.find('.jxfzoomy-list-img li').css({
                    'width':option.smallListImgW,
                    'height':option.smallListImgH
                });
                configPara.$container.find('.jxfzoomy-list-img li div').css({
                    'width':option.smallListImgW,
                    'height':option.smallListImgH
                });
                configPara.$container.find('.jxfzoomy-list-img li img').css({
                    'max-width':option.smallListImgW,
                    'max-height':option.smallListImgH
                });
                var jqSmallListImg = configPara.$container.find('.jxfzoomy-list-img li');
                var smallListImgSum = jqSmallListImg.length;
                if(smallListImgSum * (option.smallListImgW+2+5) > option.smallBoxW){//+2为边框+5为缩略图间距
                    configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct').css({
                        'margin-left':'15px',
                        'width':option.smallBoxW - 35
                    });
                }else{
                    //将所有缩略图居中显示 +2为边框+5为缩略图间距
                    var firstImgMarginleft = (option.smallBoxW - smallListImgSum*(option.smallListImgW+2+5) + 5)/2;
                    $(jqSmallListImg[0]).css('margin-left',firstImgMarginleft);
                    //隐藏所有箭头
                    configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt,.jxfzoomy-thumb-box .jxfzoomy-thumb-gt').hide();
                }
                
            },
            initMask : function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                var $bigImgW = configPara.$bigImg.width();
                var $bigImgH = configPara.$bigImg.height();
                configPara.$mask.css({
                    'width': configPara.$smallImg.width() * option.bigBoxW / $bigImgW,
                    'height': configPara.$smallImg.height() * option.bigBoxH / $bigImgH
                });
            },
            bindEvent:function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var option = $.fn.jxfZoomy.option;
                var maskLeft = 0;
                var maskTop = 0;
                //大图和小图的倍数关系
                configPara.$container.find('.jxfzoomy-small-box-move').on('mouseenter', function (event) {
                    configPara.$mask.css('display', 'block');
                    configPara.$bigBox.css({
                        'width': option.bigBoxW,
                        'height': option.bigBoxH,
                        'border-width':1
                    });
                });
                configPara.$container.find('.jxfzoomy-small-box-move').on('mouseleave', function (event) {
                    configPara.$mask.css('display', 'none');
                    // configPara.$bigBox.css('display', 'none');
                    configPara.$bigBox.css({
                        'width': 0,
                        'height': 0,
                        'border-width':0
                    });
                });
                
                //注册最下面的小缩略图点击事件
                configPara.$container.find('.jxfzoomy-list-img li').on('click', function (event) {
                    configPara.$container.find('.jxfzoomy-active').removeClass('jxfzoomy-active');
                    $(this).addClass('jxfzoomy-active');
                    configPara.$smallImg.attr('src',$(this).attr('data-smallImg')); //$(this).data().smallimg IE8取不到值，郁闷
                    configPara.$container.find('.jxfzoomy-big-img').attr('src',$(this).attr('data-bigImg'));
                    
                    $.fn.jxfZoomy.methods.initSmallImg();
                    $.fn.jxfZoomy.methods.initMask();
                });

                //注册左右箭头的点击事件
                var jqul = configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct ul');
                configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt').on('click', function (event) {
                    jqul.stop().animate({'margin-left':'+='+ option.moveSpeed},200,function(){
                        if(parseInt(jqul.css('margin-left'),10) > 0){
                            jqul.animate({'margin-left':'0'},200);
                        }
                    });
                });
                var jqSmallListImg = configPara.$container.find('.jxfzoomy-list-img li');
                var smallListImgSum = jqSmallListImg.length;
                var minLeft = -1 * (smallListImgSum*(option.smallListImgW+2+5) - configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct').width());
                configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-gt').on('click', function (event) {
                    jqul.stop().animate({'margin-left':'-='+ option.moveSpeed},200,function(){
                        if(parseInt(jqul.css('margin-left'),10) < minLeft){
                            jqul.animate({'margin-left':minLeft},200);
                        }
                    });
                });
            },
            bindEvent2:function(){
                var configPara = $.fn.jxfZoomy.methods.configPara;
                var $bigImgW = configPara.$bigImg.width();
                var $bigImgH = configPara.$bigImg.height();
                configPara.$container.find('.jxfzoomy-small-box-move').unbind("mousemove");
                configPara.$container.find('.jxfzoomy-small-box-move').on('mousemove', function (event) {
                    maskLeft = event.clientX - $(this).offset().left - configPara.$mask.width() / 2
                    maskTop = event.clientY - $(this).offset().top - configPara.$mask.height() / 2
                    if (maskLeft > ($(this).width() - configPara.$mask.width())) {
                        maskLeft = $(this).width() - configPara.$mask.width();
                    } else if (maskLeft < 0) {
                        maskLeft = 0;
                    }
                    if (maskTop > ($(this).height() - configPara.$mask.height())) {
                        maskTop = $(this).height() - configPara.$mask.height();
                    } else if (maskTop < 0) {
                        maskTop = 0;
                    }
                    configPara.$mask.css({
                        'left': maskLeft,
                        'top': maskTop
                    });

                    configPara.$bigImg.css({
                        'left': -maskLeft * $bigImgW / configPara.$smallImg.width(),
                        'top': -maskTop * $bigImgH / configPara.$smallImg.height()
                    });
                });
            }
        };
    })(jQuery);

index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jxfzoomy.js"></script>
    <link rel="stylesheet" href="css/jxfzoomy.css">
    <script>
        //页面加载完毕后执行
        $(document).ready(function () {
            $('#container').jxfZoomy({
            smallBoxW: 350,//小图框的宽 单位px 默认250px
            smallBoxH: 250,//小图框的高 单位px 默认250px
            bigBoxW: 450, //大图放大镜框的宽 单位px 默认350px
            bigBoxH: 350, //大图放大镜框的高 单位px 默认350px
            smallListImgW:80,//缩略图的宽 单位px 默认50px
            smallListImgH:50,//缩略图的高 单位px 默认50px
            moveSpeed:100 //缩略图点击左右方向键移动的速度 单位px 默认50px
            });
        });
    </script>
</head>

<body>
    <!-- 基本格式 -->
    <div id="container" class='jxfzoomy-container'>
        <div class="jxfzoomy-thumb-box">
            <div class="jxfzoomy-thumb-ct">
                <ul class='jxfzoomy-list-img jxfzoomy-clearfix'>
                    <!-- 有jxfzoomy-active为当前选中的图片 data-smallImg属性为小图路径 
                    data-bigImg属性为大图路径 <li>标签内部的img为缩略图 -->
                    <li class='jxfzoomy-active' data-smallImg="images/0_min.jpg" data-bigImg="images/0_big.jpg">
                        <div>
                            <img src="images/0_thumb.jpg" alt="">
                        </div>
                    </li>
                    <li data-smallImg="images/1_min.jpg" data-bigImg="images/1_big.jpg">
                        <div>
                            <img src="images/1_thumb.jpg" alt="">
                        </div>
                    </li>
                    <li data-smallImg="images/2_min.jpg" data-bigImg="images/2_big.jpg">
                        <div>
                            <img src="images/2_thumb.jpg" alt="">
                        </div>
                    </li>
                    <li data-smallImg="images/3_min.jpg" data-bigImg="images/3_big.jpg">
                        <div>
                            <img src="images/3_thumb.jpg" alt="">
                        </div>
                    </li>
                    <li data-smallImg="images/4_min.jpg" data-bigImg="images/4_big.jpg">
                        <div>
                            <img src="images/4_thumb.jpg" alt="">
                        </div>
                    </li>
                    <li data-smallImg="images/5_min.jpg" data-bigImg="images/5_big.jpg">
                        <div>
                            <img src="images/5_thumb.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>

本文固定链接：https://blog.csdn.net/u011135729/article/details/79642425