JS Magnifier effect

Tag: otherwise mouseover offset tle. BSP Next HTM use background

Principle Analysis: When the mouse moves on the small picture, by capturing the mouse in the small picture position, the position of the large picture. (also, when the mouse moves on a small picture, the large picture on the right moves in the opposite direction.) ）

Magnifier Effect Design:

① page elements: small pictures, big pictures and containers for pictures

② Event Capture: onmouseover (occurs when the mouse pointer moves over the specified object), onmouseout (occurs when the mouse pointer is removed from the specified object), onmousemove (occurs when the mouse pointer moves)

③ Technical Difficulties: offsetleft (relative to the left displacement of the parent element), OffsetTop (relative to the top displacement of the parent element)

Note: The difference between offsetleft and Style.left: A. The latter returns a string (10px), the former Returns a value (10);

B. The latter is readable and read-only and the former is read-only. So to change the position of the element to use Style.left;

C. style.left need to be defined in advance, otherwise the null value is taken;

D. offestleft is only valid for values set in HTML and is not recognized in CSS.

The width and height shown by the Offsetwidth/offsetheight element

Event.clientx/event.clienty element relative to the horizontal ordinate of the page

Calculations required to make Magnifier effects

Focus: How to make small pictures on the magnifying glass and large pictures at the same time move.

FORMULA: small img Wide/large img width = magnifier wide/Large picture viewable area width = Small picture left shift/large picture right shift

Wherein, the small img width and large img Width is known, the magnifying glass width and visibility area is known, the left mouse movement can be obtained by moving the large picture to the right, to determine the large picture position.

Develop Magnifier effects:

Small picture left shift/(large img Width-small img width) =? /(Width of viewable area-magnifier width)

Compatibility issues:

Because in IE, it is easy to put the picture or span, but when the mouse moved into the picture, it is considered to have removed the container, and then immediately triggered the onmouseover event, resulting in the magnifying glass effect of repeated flashing.

Workaround: Overlay an isolated layer with a background color of 0 on the original image, and then bind all the events bound to the original picture container to the isolation layer.

JS Magnifier effect