Try making javascript magnifiers _ javascript skills

This article mainly introduces the javascript magnifier effect. According to other people's examples, I tried to make a magnifier effect, interested friends can refer to the examples in this article to introduce the principle and code for implementing the magnifier Effect Based on javascript, and share it with you for your reference. The specific content is as follows:

Principle:

A: magnifier B: small image

C: visible area of large images

D: large image

The cursor should be in the center of the magnifier, so the cursor is:

ClientX = A. offsetLeft () + B. offsetLeft + 1/2 * A. offsetWidth;

ClientY = A. offsetTop () + B. offsetTop + 1/2 * A. offsetHeight;

During the move of the mouse: The magnifiers A and D move in proportion to the mouse, because when the right border of A is moved to the right border of B, the larger graph D should also be moved to the place where the right border and the right border of C overlap, so their moving ratio is:( D. offsetWidth-C.offsetWidth)/(B. offsetWidth-A.offsetWidth) = B/

HTML section:

 Magnifier Effect
 
 
 
 

Js section:

Script window. onload = function () {var demo = document. getElementById ('Demo'); var small = document. getElementById ('small'); var big = document. getElementById ('Big '); var glass = document. getElementById ('glass ') var image = document. getElementById ('Big '). getElementsByTagName ('img ') [0]; var zhezhao = document. getElementById ('zhezhao'); zhezhao. onmouseover = function () {glass. style. display = 'block' big. style. display = 'block'} zhezhao. onmouseout = function () {glass. style. display = 'none' big. style. display = 'none'} // clarify the relationship between clientX, offsetLeft, and left. Distinguish zhezhao. onmousemove = function (ev) {var event = evvar left = event. clientX-demo.offsetLeft-small.offsetLeft-glass.offsetWidth/2; var top = event. clientY-demo.offsetTop-small. offsetTop-glass. offsetHeight/2; if (left <0) {left = 0;} else if (left> (small. offsetWidth-glass.offsetWidth) {left = small. offsetWidth-glass.offsetWidth} if (top <0) {top = 0;} else if (top> (small. offsetHeight-glass. offsetHeight) {top = small. offsetHeight-glass. offsetHeight} glass. style. left = left + 'px '; glass. style. top = top + 'px '; var percent = (image. offsetWidth-big.offsetWidth)/(small. offsetWidth-glass.offsetWidth) image. style. left =-percent * left + 'px 'image. style. top =-percent * top + 'px '} script

The above is all of the content in this article, hoping to help you achieve the javascript magnifier effect.