Jingdong Taobao magnifier package

Implementation method

There are many ways to achieve the effect of magnifier, such as background image magnifier, absolute positioning magnifier and canvas magnifier.

  1. Background image method: mainly through background position and background size
  2. Absolute positioning: mainly realized by position:absolute, left and top
  3. canvas magnifier method: mainly through context.drawimage (IMG, SX, sy, swidth, height, x, y, width, height); implementation

characteristic

  • The implementation technology of the first two is relatively simple and has good compatibility
  • canvas has a good experience, but it can't be compatible with low version browsers

The following is implemented in the way of "absolute positioning". Note that the introduction of lower version of jQuery can have better compatibility, such as jquery-1.11.0.js

HTML section

<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 part

* {  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 part

;(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;//Magnification
        this.sw = this.sbox.width(); //Width of small picture
        this.sh = this.sbox.height(); //Height of small picture
        this.bw = this.sw * this.times; //Calculation size (width) of large picture
        this.bh = this.sh * this.times; //Calculation size (height) of large picture
        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);

//Initialization method
ShowBig.init('#magnifier');

Tags: JQuery

Posted on Mon, 11 May 2020 11:35:43 -0400 by hax