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

This article will explain in detail how to achieve a simple magnifying glass effect in javascript. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

There is a picture in a big box, and a translucent mask layer appears when the mouse is put on it. When the mouse moves, the mask layer moves along with it, and there is an enlarged picture next to the box. Follow the position of the mask layer to change the position of the enlarged image. When the mouse leaves the big box, the mask layer and the enlarged picture disappear.

Realization idea

1. Html and css edit the box, mask layer and enlarged picture page, set the mask layer and hide the enlarged picture by default

2. Get the element object and bind the big box to the mouse event

Mouse over-mouseover, set mask layer when mouse over and enlarge figure shows: display is set to 'block'

The mouse leaves---mouseout, set the mask layer when the mouse passes over and enlarge the picture shows: display is set to 'none'

3. Calculate the position of the mouse in the big box

4. Place the mouse in the middle of the mask layer: move the mask layer up half the distance to the left relative to the mouse position

The position of the mask layer-give it an absolute position and assign an offset from the upward to the left in the box

5. Restrict the movement of the mask layer in the big box-determine the value of the offset

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.