Shulou(Shulou.com)06/03 Report--

This article is about how js can achieve the magnifying glass effect on shopping websites. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

First of all, let's talk about the principle. Take the magnifying glass effect of a commodity of Tmall as an example:

In fact, the so-called magnifying glass effect is also an effect of deceiving our eyeballs. Here we can see that the picture showing the following row of small images is actually the same as the picture of the cover layer and the picture of the magnifying layer, but the resolution is different, so to achieve the magnifying glass effect, you need several groups of pictures with different resolution, but with the same content:

Obviously, what is put in the small image is the small image with small in my picture name here. The masking layer is the normal size image, and the magnifying layer is the enlarged image with big. Then add the appropriate displacement and display effect to achieve the magnifying glass effect we see. Let's do it through the code:

First write out the HTML structure:

Const oBox = document.querySelector ('# box'); const imgArr = [{small: '1.small.jpgbread, normal:' 1.jpgbread, big: '1.big.jpg`}, {small:' 2.small.jpgbread, normal: '2.jpgbread, big:' 2.big.jpg`}]

Then add the css style:

Body,div,ul,li {margin: 0; padding: 0; list-style: none; font-size: 0;} img {display: block;} # box {width: 650px; position: relative; margin: 0 auto 0 240px;} # box .show {width: 600px; border: solid 2px hotpink; position: relative;} # box .show img {width: 100%;} # box .show .drag {position: absolute; width: 200px Height: 200px; background-color: # e0a8d7; opacity: .4; left: 0; top: 0; display: none;} # box .magnify {width: 800px; height: 800px; border: solid 2px # 7d777b; position: absolute; left: 100%; top: 0; background: url (".. / images/1.big.jpg") no-repeat 00 / 2400px; display: none } # box ul {width: 100%; height: 150px; margin-top: 20px;} # box ul::after {content:'; display: block; clear: both;} # box ul li {height: 100%; float: left; margin: 08 px; border: solid 2px # fff;} # box ul li.active {border-color: hotpink;} # box ul li img {height: 100%;}

When setting css style here, you should pay attention to:

The magnification layer is proportionally magnified by the mask layer, so the ratio of the width to height of the magnification layer to the width and height of the mask layer, and the size of the background image of the magnification layer is the same as that of the normal display picture (that is, the picture in the class= "show" box).

Here you need to use js to achieve several effects:

1. The cover layer and magnification layer box are displayed when the mouse moves into the normal picture box, and the cover layer and magnification layer box are hidden when the mouse moves out of the normal picture box.

2. Locate the position of the cover layer so that it moves with the mouse in the normal picture box, while magnifying the picture corresponding to the magnification layer moves in the magnification layer box.

3. Set the effect of switching between small images, and at the same time, switch normal pictures and enlarged images to corresponding pictures.

Then put the code:

Class MgnGlass {constructor (ele, array) {this.ele = ele; this.array = array; this.show = ele.querySelector ('.show'); this.showImg = this.show.querySelector ('img'); this.drag = ele.querySelector (' .drag'); this.magnify = ele.querySelector ('.magnify'); this.oUl = ele.querySelector ('ul') This.oUlis = ele.querySelectorAll ('ul li');} / / define a method to call all subsequently defined method / / entry functions init () {this.setMouse (); this.setPosition (); this.setTab () } / / move the mouse in and out of setMouse () {/ / move the mouse in, the picture area show, let the cover layer and magnifying glass show this.show.addEventListener ('mouseover', () = > {this.drag.style.display =' block'; this.magnify.style.display = 'block';})) / move the mouse out, the picture area show, and let the cover layer and magnifying glass hide the this.show.addEventListener ('mouseout', () = > {this.drag.style.display =' none'; this.magnify.style.display = 'none';}) } / / set positioning effect / / when the mouse moves in the picture area / / 1, let the cover layer follow the mouse movement-similar to the effect of previous mouse dragging setPosition () {this.show.addEventListener ('mousemove', (e) = > {e = e | | event / / 1, position the cover layer / / calculate the coordinate position of the upper left corner of the cover layer let x = e.clientX-this.ele.offsetLeft-this.ele.clientLeft-this.drag.clientWidth / 2; let y = e.clientY-this.ele.offsetTop-this.ele.clientTop-this.drag.clientHeight / 2 / / 2, set the boundary value / / minimum is 0 maximum value parent div width height-cover layer width height if (x

(this.show.clientWidth-this.drag.clientWidth) {x = this.show.clientWidth-this.drag.clientWidth;} if (y

(this.show.clientHeight-this.drag.clientHeight) {y = this.show.clientHeight-this.drag.clientHeight;} / / 3, position the value to the concealment layer this.drag.style.left = x + 'px'; this.drag.style.top = y +' px' / / 4, you need to move the background picture of the right magnifying glass together / / add positioning to the background picture / / the picture is still on the left, the cover layer moves 100 100 / / the right side is the magnifying glass, the background picture moves-100-100 / / when the background picture moves Positioning must be set according to scale / / background image positioning = background picture size * masking layer positioning / picture size / / calculated by the ratio of the movement of the masking layer, the value of background image positioning let backX = 2400 * x / 60000 Let backY = 2400 * y / 600; / locate the background image / / assign the value to the background image this.magnify.style.backgroundPosition = `- ${backX} px-${backY} px` })} / / Toggle effect / / 1, add style to the current mouse over mouseover tag, add style to all tags, add style setTab () {this.oUlis.forEach ((item, key) = > {item.addEventListener ('mouseover', () = > {/ / 1) Clear the style this.oUlis.forEach ((item2) = > {item2.className ='') for all li tags }); / / 2, add the style item.className = 'active' to the current tag / / 3, set the index subscript of the picture / / current label key is the index subscript / / 1 of the picture to be displayed in the image array, label the picture, set the path / / through the array, index, picture attributes Get the corresponding picture name / / tag. Src = assignment or tag .setAttribute ('src', attribute value) can be this.showImg.setAttribute (' src', `. / images/$ {this.array.normal}`) / / 2, set the path for the magnifying glass area and the background image / / all settings about the background image must be rewritten this.magnify.style.background = `url ('. / images/$ {this.array [key] .big}') no-repeat 00 / 2400px`;})}}

In order to achieve a perfect magnifying glass effect, we must pay attention to 2 proportions:

1. Proportion of CSS style: image area size: cover layer size = background picture size: magnifying glass area size

2. Proportion of positioning: concealment layer positioning: picture area size = background picture positioning: background picture size

Then call our constructor to get the final HTML, and execute it to achieve our magnifying glass effect:

Magnifying glass

Const oBox = document.querySelector ('# box'); const imgArr = [{small: '1.small.jpgbread, normal:' 1.jpgbread, big: '1.big.jpg`}, {small:' 2.small.jpgbread, normal: '2.jpgbread, big:' 2.big.jpg`}]; const mgnGlass = new MgnGlass (oBox, jpg`) MgnGlass.init (); Thank you for your reading! This is the end of the article on "how to achieve the magnifying glass effect of js on shopping websites". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.