Jquery插件——图片放大镜-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Jquery插件——图片放大镜

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

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

效果还不错，如下图：

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://lswzjz.com/article/jeccic.html

新闻中心

其他资讯