Wonderful Javascript picture magnifying glass_image special effects

In Flash, we can use a mask and some simple scripts to create a dynamic picture magnifying glass. Now we can easily achieve this effect using only JavaScript combined with CSS language.

　Production idea: There is a background image behind the "magnifying glass", which is the original of the "enlarged" image. We adjust the position of the background image appropriately when moving the "magnifying glass" so that it displays exactly the part that needs to be enlarged.

　Effect demonstration: (Click here to view in a new window)

　Production steps:

1) First prepare two pictures with the same content and different sizes. Here we find a 400×300 pixel thumbnail small_hill.gif and a 800×600 pixel large picture big_hill.gif. Then prepare a "magnifying glass" picture. Note that the middle part must be transparent. Here we have prepared a green box viewer.gif.

2) Write the following code:

The following is the code for the two pictures, both of which are used as layers. The first one is a thumbnail, and the second one is a "magnifying glass", which first moves its background to an invisible place; where "onclick="moveme=!moveme"" means that every time it is clicked, the boolean of "moveme" is changed. value.

"small_hill.gif" id="bgLayer" style= "position:absolute; left:150px; top:50px;">
"viewer.gif" id="myviewer" onclick="moveme=!moveme" onmousemove="viewit (this)"
style="left:0;top:0;background-repeat:no-repeat; background-position:2000px 2000px;position:absolute;" >

The following is the JavaScript script:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Magnifying glass</title> <center> --JS magnifying glass display-- Click the magnifying glass to start browsing, click again to stop. </center>