京東淘寶放大鏡封裝

實作方法

實作放大鏡效果的方式有很多，比較典型的有“背景圖檔法放大鏡”、“絕對定位法放大鏡”、“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: ;  padding: ;  }
p {  text-indent: em;  }
h3 {  text-align: center;  }
.magnifier {  margin: px ;  position: relative;  }
.magnifier .small-pic {  width: px;  height: px;  position: relative;  margin-left: px;  }
.magnifier .small-pic img {  display: block;  width: %;  height: %;  }
.magnifier .small-pic .pointer {  width: %;  height: %;  border: px solid red;  position: absolute;  box-sizing: border-box;  top: ;  left: ;  cursor: crosshair;  display: none;  background-image: url('../img/red_back_0.2.png');  }
.magnifier .big-pic {  position: absolute;  left: px;  top: px;  width: px;  height: px;  overflow: hidden;  display: none;  }
.magnifier .big-pic img {  position: absolute;  top: ;  left: ;  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')) : ;//放大倍數
        this.sw = this.sbox.width(); //小圖檔的寬
        this.sh = this.sbox.height(); //小圖檔的高
        this.bw = this.sw * this.times; //大圖檔的計算尺寸（寬度）
        this.bh = this.sh * this.times; //大圖檔的計算尺寸（高度）
        this.left = ;
        this.top = ;
        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().getBoundingClientRect().top;
                _this.left = _vm.get().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 / ;
                var pt = by - ph / ;

                if (pl < ) {
                    pl = ;
                } else if (pl > _this.sw - pw) {
                    pl = _this.sw - pw;
                }
                if (pt < ) {
                    pt = ;
                } 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();
                _this.bpic.parent().fadeIn();
                _this.bpic.css({
                    width: _this.bw + 'px',
                    height: _this.bh + 'px'
                });
            }, function () {
                _this.pointer.fadeOut();
                _this.bpic.parent().fadeOut();
            });
        }
    });
    showBig.init = function (selector) {
        new this(selector);
    };
    win.ShowBig = showBig;
})(window, jQuery);

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