Implementation method
There are many ways to achieve the effect of magnifier, such as background image magnifier, absolute positioning magnifier and canvas magnifier.
- Background image method: mainly through background position and background size
- Absolute positioning: mainly realized by position:absolute, left and top
- 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 id="magnifier" data-size="4"> <div> <img src="../img/ss.jpg" alt="smallpic"> <div></div> </div> <div><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');