Jquery插件——图片放大镜

    偶然前端网发现了一个比较好的图片放大镜效果插件，稍作修改完善了一下，下面分享给大家。

成都创新互联公司主营福安网站建设的网络公司,主营网站建设方案,成都app软件开发,福安h5微信小程序搭建,福安网站营销推广欢迎福安等地区企业咨询

效果还不错，如下图：

    
    
    
    body {
        margin:200px;
        background:#000;
    }
    ol, li {
        list-style: none;
        margin:0;
        padding:0;
    }
    .clearfix:after {
        content:"\200B";
        display: block;
        height: 0;
        clear: both;
    }
    .clearfix {
        *zoom:1;
    }
    .magnifier {
        width:402px;
        height:402px;
    }
    .m_p_w_picpath {
        position:relative;
        width:400px;
        height:400px;
        border:1px #634575 solid;
    }
    .m_p_w_picpath li {
        position: absolute;
    }
    .m_p_w_picpath li.now {
        z-index:1;
    }
    .im_zoom {
        background:#FEDE4F 50% top no-repeat;
        opacity:0.5;
        display: block;
        position: absolute;
        width:100px;
        height:100px;
        left:0;
        top:0;
    }
    .im_zoom_viewer {
        position:absolute;
        width:400px;
        height:400px;
        border:1px #634575 solid;
    }
    .m_thumb {
        position:relative;
        width:402px;
        height:57px;
        overflow:hidden;
        margin-top:10px;
    }
    .m_prev, .m_next {
        display:block;
        height:54px;
        width:17px;
        text-indent:-99999em;
        position:absolute;
        z-index:99;
    }
    .m_prev {
 background:url(/upload/otherpic62/195114anj0yn8hefawepha.png) no-repeat 0 0;
        left:0;
    }
    .m_next {      background:url(/upload/otherpic62/195114anj0yn8hefawepha.png) no-repeat -17px 0;
        right:0;
    }
    .m_prev:hover {  background:url(/upload/otherpic62/195114anj0yn8hefawepha.png) no-repeat -34px 0;
        left:0;
    }
    .m_next:hover {    background:url(/upload/otherpic62/195114anj0yn8hefawepha.png) no-repeat -51px 0;
    }
    .m_thumb_img {
        width:402px;
        height:54px;
        overflow: hidden;
        margin-left:17px;
        position:relative;
    }
    .m_thumb_img ol {
        position:absolute;
        width:300%;
    }
    .m_thumb_img li {
        width:54px;
        height:54px;
        float:left;
        margin:0 10px;
    }
    .m_thumb_img a {
        border:2px #a6ad88 solid;
        display:block;
        height:50px;
        float:left;
    }
    .m_thumb_img a:hover, .m_thumb_img .now {
        border:2px #f60 solid;
    }
    


    
    
    (function($) {
        var methods = {
            magnifier: function(options) {
                return this.each(function() {
                    var defaults = {
                        zoomWidth: 100,
                        zoomHeight: 100,
                        largeImgWidth: 400,
                        largeImgHeight: 400
                    },
                        settings = $.extend({}, defaults, options),
                        _body = $('body'),
                        _This = $(this),
                        _imgBox = _This.find('.m_p_w_picpath'),
                        _imgShow = _imgBox.find('img'),
                        _thumbContent = _This.find('.m_thumb'),
                        _thumbList = _thumbContent.find('ol'),
                        _thumbLiLeft = _thumbContent.find('li').eq(0).css("margin-left"),
                        _thumbLiRight = _thumbContent.find('li').eq(0).css("margin-right"),
                        _thumbLRWidth = parseInt(_thumbLiLeft) + parseInt(_thumbLiRight),
                        _thumbWidth = _thumbList.find('a')[0].offsetWidth,
                        _thumbImg = _thumbContent.find('img'),
                        _prev = _thumbContent.find('.m_prev'),
                        _next = _thumbContent.find('.m_next'),
                        _width = _imgBox.width(),
                        _height = _imgBox.height(),
                        _positionX = _This.offset().left,
                        _positionY = _This.offset().top,
                        count = moveLen = 0,
                        _img = new Image();
                    _thumbList.find('a').on('click', function(event) {
                        var _this = $(this),
                            _src = _this.find('img').attr('src');
                        _img.src = _src;
                        $('.im_zoom_viewer').css({
                            background: 'url(' + _src + ') no-repeat'
                        });
                        _thumbList.find('a').removeClass('now');
                        _this.addClass('now');
                        _imgShow.attr('src', _src);
                    });
                    _imgBox.on({
                        mouseenter: function(event) {
                            var _this = $(this),
                                _zoomX = event.pageX - _positionX - (settings.zoomWidth / 2),
                                _zoomY = event.pageY - _positionY - (settings.zoomHeight / 2),
                                _imgSrc = _imgBox.find('img').attr('src');
                            _this.css("cursor", "move").append('');
                            if (!_body.find('.im_zoom_viewer').length) {
                                _body.append('