京东淘宝放大镜封装

实现方法

实现放大镜效果的方式有很多，比较典型的有“背景图片法放大镜”、“绝对定位法放大镜”、“canvas放大镜”。

1. 背景图片法：主要通过background-position 和background-size 来实现
2. 绝对定位法：主要通过position:absolute 和 left,top 来实现
3. canvas放大镜法：主要通过context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 实现

特点

• 前2者的实现技术相对简单，兼容性好
• canvas的体验度好，但兼容不了低版本浏览器

下面以“绝对定位法”的方式实现，注意引入低版本的jquery能有更好的兼容性，比如jquery-1.11.0.js

HTML部分

<div class="magnifier" id="magnifier" data-size="4">
    <div class="small-pic">
        <img src="../img/ss.jpg" alt="smallpic">
        <div class="pointer"></div>
    </div>
    <div class="big-pic"><img src="../img/bb.jpg" alt="bigpic"></div>
</div>

<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/showBigImg.js"></script>

css部分

* {  margin: 0;  padding: 0;  }
p {  text-indent: 2em;  }
h3 {  text-align: center;  }
.magnifier {  margin: 20px 0;  position: relative;  }
.magnifier .small-pic {  width: 320px;  height: 200px;  position: relative;  margin-left: 20px;  }
.magnifier .small-pic img {  display: block;  width: 100%;  height: 100%;  }
.magnifier .small-pic .pointer {  width: 50%;  height: 50%;  border: 1px solid red;  position: absolute;  box-sizing: border-box;  top: 0;  left: 0;  cursor: crosshair;  display: none;  background-image: url('../img/red_back_0.2.png');  }
.magnifier .big-pic {  position: absolute;  left: 360px;  top: 0px;  width: 320px;  height: 200px;  overflow: hidden;  display: none;  }
.magnifier .big-pic img {  position: absolute;  top: 0;  left: 0;  display: block;  }

js部分

;(function (win, $) {
    var showBig = function (selector) {
        this.box = $(selector);
        this.sbox = this.box.find('.small-pic');
        this.spic = this.box.find('.small-pic img');
        this.bpic = this.box.find('.big-pic img');
        this.pointer = this.box.find('.pointer');
        this.times = this.box.attr('data-size') != null ? Number(this.box.attr('data-size')) : 2.5;//放大倍数
        this.sw = this.sbox.width(); //小图片的宽
        this.sh = this.sbox.height(); //小图片的高
        this.bw = this.sw * this.times; //大图片的计算尺寸（宽度）
        this.bh = this.sh * this.times; //大图片的计算尺寸（高度）
        this.left = 0;
        this.top = 0;
        this.mousemoveEvent();
        this.hoverEvent();
        this.reSizePointer();
    };
    $.extend(true, showBig.prototype, {
        reSizePointer: function () {
            this.pointer.css({
                width: this.sw / this.times,
                height: this.sh / this.times
            });
        },
        mousemoveEvent: function () {
            var _this = this;
            this.sbox.mousemove(function (e) {
                var _vm = $(this);
                _this.top = _vm.get(0).getBoundingClientRect().top;
                _this.left = _vm.get(0).getBoundingClientRect().left;
                var bx = e.clientX - _this.left;
                var by = e.clientY - _this.top;
                var pw = _this.pointer.outerWidth();
                var ph = _this.pointer.outerHeight();
                var pl = bx - pw / 2;
                var pt = by - ph / 2;

                if (pl < 0) {
                    pl = 0;
                } else if (pl > _this.sw - pw) {
                    pl = _this.sw - pw;
                }
                if (pt < 0) {
                    pt = 0;
                } else if (pt > _this.sh - ph) {
                    pt = _this.sh - ph;
                }
                _this.pointer.css({
                    left: pl + 'px',
                    top: pt + 'px'
                });
                _this.bpic.css({
                    left: -pl * _this.times + 'px',
                    top: -pt * _this.times + 'px'
                });
            });
        },
        hoverEvent: function () {
            var _this = this;
            this.sbox.hover(function () {
                _this.pointer.fadeIn(50);
                _this.bpic.parent().fadeIn(50);
                _this.bpic.css({
                    width: _this.bw + 'px',
                    height: _this.bh + 'px'
                });
            }, function () {
                _this.pointer.fadeOut(50);
                _this.bpic.parent().fadeOut(50);
            });
        }
    });
    showBig.init = function (selector) {
        new this(selector);
    };
    win.ShowBig = showBig;
})(window, jQuery);

//初始化方法
ShowBig.init('#magnifier');