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

This article introduces the relevant knowledge of "how to use JavaScript to imitate the magnifying glass effect of JD.com". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The details are as follows

Case analysis

The whole case can be divided into three functional modules.

The mouse passes through the small picture box, the yellow masking layer and the large picture box are displayed, leaving the function of hiding 2 boxes.

The yellow occlusion layer follows the mouse function.

Move the yellow occlusion layer, and the big picture follows the movement function.

The mouse passes through the small picture box, the yellow masking layer and the large picture box are displayed, leaving the function of hiding 2 boxes.

Is to show and hide.

Move the yellow occlusion layer, the large picture follows the movement function, and the moving distance of the large picture should be equal to the proportion of the yellow occlusion layer.

A formula for finding the moving distance of a large picture

Code Document. 1px solid _ wrap {width: 400px; height: 400px;} .mask _ img {position: relative; height: 398px; border: 1px solid # ccc;} .mask {display: none; position: absolute; top: 0 Left: 0; width: 300px; height: 300px; background: # FEDE4F; opacity: .5; border: 1px solid # ccc; cursor: move;} .big {display: none; position: absolute; left: 410px; top: 0 Width: 500px; height: 500px; background-color: pink; z-index: 999; border: 1px solid # ccc; overflow: hidden;} / * you can set left top * / .big img {position: absolute; top: 0 only if you add absolute positioning to the image. Left: 0;}

Var preview_img = document.querySelector ('.mask _ img'); var mask = document.querySelector (' .mask'); var big = document.querySelector ('.big'); / / 1. When we pass over preview_img, we show and hide mask occlusion layer and big big box preview_img.addEventListener ('mouseover', function () {mask.style.display =' block'; big.style.display = 'block';}) preview_img.addEventListener (' mouseout', function () {mask.style.display = 'none'; big.style.display =' none'') }) / / 2. When the mouse moves, let the yellow box follow the mouse to preview_img.addEventListener ('mousemove', function (e) {/ / (1). First calculate the coordinates of the mouse in the box var x = e.pageX-this.offsetLeft; var y = e.pageY-this.offsetTop; / / console.log (x, y); / / (2) minus half of the box height 300 is the final left and top value of our mask / / (3) the distance of our mask movement var maskX = x-mask.offsetWidth / 2 Var maskY = y-mask.offsetHeight / 2; / / (4) if the x coordinate is less than 0, let him stop at the position of 0 / / the maximum moving distance of the occlusion layer var maskMax = preview_img.offsetWidth-mask.offsetWidth; if (maskX = maskMax) {maskX = maskMax;} if (maskY = maskMax) {maskY = maskMax } mask.style.left = maskX + 'px'; mask.style.top = maskY +' px'; / / 3. Moving distance of large picture = moving distance of occlusion layer * maximum moving distance of large picture / maximum moving distance of occlusion layer / / large image var bigIMg = document.querySelector ('.bigImg'); / / maximum moving distance of large picture var bigMax = bigIMg.offsetWidth-big.offsetWidth; / / moving distance of large picture X Y var bigX = maskX * bigMax / maskMax Var bigY = maskY * bigMax / maskMax; bigIMg.style.left = bigX + 'px'; bigIMg.style.top = bigY +' px';}) "how to use JavaScript to imitate the magnifying glass effect of JD.com" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.