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

This article is about how JavaScript implements a magnifying glass. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Realization principle

With the help of the two images enlarged in wide and high scale, combined with the mouse offset, element offset, and the element's own wide and high attributes in js; the left mask moves Xpx, and the right large image moves X* multiple px;. The rest of the OK is calculated with primary school math.

HTML and CSS:

* {margin: 0; padding: 0;} .wrap {width: 1500px; margin: 100px auto;} # small {width: 432px; height: 768px; float: left; position: relative;} # big {/ * background-color: seagreen; * / width: 768px; height: 768px; float: left / * part hidden beyond the viewfinder * / overflow: hidden; margin-left: 20px; position: relative; display: none;} # bigimg {/ * width: 864px; * / position: absolute; left: 0; top: 0;} # mark {width: 220px; height: 220px; background-color: # fff; opacity: .5 Position: absolute; left: 0; top: 0; / * mouse arrow style * / cursor: move; display: none } / / get small images and masks, large images, large boxes var small = document.getElementById ("small") var mark = document.getElementById ("mark") var big = document.getElementById ("big") var bigimg = document.getElementById ("bigimg") / / get mouse movement events in the small image area The mask follows the mouse movement small.onmousemove = function (e) {/ / to get the offset of the mask relative to the small image (mouse coordinates-offset of the small image from the body-half of the width or height of the mask itself) var s_left = e.pageX-mark.offsetWidth / 2-small.offsetLeft var s_top = e.pageY-mark.offsetHeight / 2-small.offsetTop / / the mask can only be moved within the small image So you need to calculate the critical value of the mask offset (relative to the value of the small image) var max_left = small.offsetWidth-mark.offsetWidth Var max_top = small.offsetHeight-mark.offsetHeight / / the mask moves the large image on the right side also follows the movement (the mask moves 1px, the picture needs to move n times the distance in the opposite direction) var n = big.offsetWidth / mark.offsetWidth / / judge before the mask follows the mouse: the offset of the mask relative to the small image cannot be out of range. Re-assign the value beyond the range (the critical value has been calculated above: max_left and max_top) / / determine the horizontal boundary if (s_left

Max_left) {s_left = max_left} / / determine the vertical boundary if (s_top

Max_top) {s_top = max_top} / / assign values to the mask left and top (dynamic? Because e.pageX and e.pageY are the amount of change), move! Mark.style.left = s_left + "px"; mark.style.top = s_top + "px"; / / calculate the moving distance of the large image var levelx =-n * sroomtop; var verticaly =-n * sroomtop; / / Let the picture move bigimg.style.left = levelx + "px"; bigimg.style.top = verticaly + "px" } / / move the mouse into the mini image to display the mask and follow the movement style. Small.onmouseenter = function () {mark.style.display = "block" big.style.display= "block"} small.onmouseleave = function () {mark.style.display = "none" big.style.display= "none"} Thank you for reading! This is the end of the article on "how to achieve a magnifying glass in JavaScript". 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.