平武建站

Jquery插件——图片放大镜

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

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

效果还不错，如下图：

Jquery插件——图片放大镜

Jquery插件——图片放大镜




    
    放大镜
    
    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('
');                                 $('.im_zoom_viewer').css({                                     background: 'url(' + _imgSrc + ') no-repeat'                                 });                                 _img.src = _imgSrc;                             }                         },                         mouseleave: function(event) {                             var _this = $(this);                             _this.find('.im_zoom').remove();                             _body.find('.im_zoom_viewer').hide();                         },                         mousemove: function(event) {                             var _this = $(this),                                 _zoomX = event.pageX - _positionX - (settings.zoomWidth / 2),                                 _zoomY = event.pageY - _positionY - (settings.zoomHeight / 2);                             if (_zoomX < 0) {                                 _zoomX = 0;                             } else if (_zoomX > _width - settings.zoomWidth) {                                 _zoomX = _width - settings.zoomWidth;                             };                             if (_zoomY < 0) {                                 _zoomY = 0;                             } else if (_zoomY > _height - settings.zoomHeight) {                                 _zoomY = _height - settings.zoomHeight;                             };                             console.log(_img.width)                             var _viewX = Math.ceil(parseInt($('.im_zoom')[0].style.left) / (_width - settings.zoomWidth) * (_img.width - _width)),                                 _viewY = Math.ceil(parseInt($('.im_zoom')[0].style.top) / (_height - settings.zoomHeight) * (_img.height - _width));                             $('.im_zoom').css({                                 left: _zoomX,                                 top: _zoomY                             });                             $('.im_zoom_viewer').css({                                 'display': 'block',                                 'background-position': -_viewX + 'px ' + -_viewY + 'px'                             });                         }                     });                     if (_thumbImg.length < 5) {                         _next.css({                             'background-position': '-85px 0'                         });                         _prev.css({                             'background-position': '-68px 0'                         });                     }                     _next.on('click', function(event) {                         event.preventDefault();                         var _this = $(this),                             len = _thumbList.find('a').length;                         if (count < len - 5) {                             _prev.removeAttr('style');                             moveLen += _thumbWidth + _thumbLRWidth;                             _thumbList.stop().animate({                                 "left": -moveLen                             }, 100, 'linear');                             count++;                             if (count === len - 5) {                                 _this.css({                                     'background-position': '-85px 0'                                 });                             }                         }                     });                     _prev.on('click', function(event) {                         event.preventDefault();                         var _this = $(this),                             len = _thumbList.find('a').length;                         if (count > 0) {                             _next.removeAttr('style');                             moveLen -= _thumbWidth + _thumbLRWidth;                             _thumbList.stop().animate({                                 "left": -moveLen                             }, 100, 'linear');                             count--;                             if (count === 0) {                                 _this.css({                                     'background-position': '-68px 0'                                 });                             }                         }                     });                 });             }         };         $.fn.Plugins = function(method) {             //初始化插件             if (methods[method]) {                 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));             } else {                 $.error('在Plugins中不存在' + method + '方法');             }         }     })(jQuery);               $(function() {         /*             zoomWidth : 遮罩小图片宽度             zoomHeight : 遮罩小图片高度,             largeImgWidth : 大图的宽度,             largeImgHeight : 大图的高度,            */         $('.magnifier').Plugins('magnifier', {             zoomWidth: 100,             zoomHeight: 100,             largeImgWidth: 400,             largeImgHeight: 400         });     })                                         
                     prev             next                                                   
  •                                                                                                    
    •                     
  •                                                                                                    
    •                     
  •                                                                                                    
    •                     
  •                                                                                                    
    •                     
  •                                                                                                    
    •                     
  •                                                                                                    
    •                              
            
        

    参考原文地址：http://www.w3cfuns.com/article-5599770-1-1.html

    附件：http://down.51cto.com/data/2365347

    分享名称：Jquery插件——图片放大镜
    文章链接：http://pwwzsj.com/article/jeccic.html

    其他资讯