Home > Developer > JavaScript
In Flash, we can add some simple scripts on the mask to implement a dynamic image magnifier. Now we can easily make this effect by combining JavaScript with the CSS language.
Production ideas: There is a background image behind the magnifier, which is the original image of "enlarged. When we move the magnifier, adjust the position of the background image so that it is displayed as part of the image to be enlarged.
Effect demonstration: (Click here to view it in a new window)
Procedure:
. Then prepare an image with a "magnifier". Note that the middle part of the image must be transparent. Here we have prepared a Green Box viewer.gif.
2) write the following code:
The following are the codes of the two graphs, both of which act as layers. The first is a thumbnail, and the second is a "magnifier". First, move the background to an invisible place, where "onclick =" moveme =! Moveme "" indicates that the Boolean Value of "moveme" is changed every time you click it.
Style = "left: 0; top: 0; background-repeat: no-repeat; background-position: 2000px 2000px; position: absolute;">
The following is a JavaScript script:
<Script language = "JavaScript">
<! --
Var viewer_bgcolor = "# FFFFFF"; // the background color of the magnifier. It is recommended that the background color be the same as the webpage background color.
Var bigmap = "big_hill.gif"; // large image path
Document. all. myviewer. style. backgroundImage = 'url ('+ bigmap + ')';
Document. all. myviewer. style. backgroundColor = viewer_bgcolor;
// Because the large image cannot be set and read as the background, a copy of the image is used as a real image, but it is invisible:
Document. write (' ');
Var moveme = false; // The Boolean value determines whether the "magnifiers" move with the mouse. The initial value is no.
Function viewit (obj ){
If (moveme ){
// The following two lines control the movement of the magnifier:
Obj. style. left = event. x + parseInt (document. body. scrollLeft)-parseInt (obj. width)/2;
Obj. style. top = event. y + parseInt (document. body. scrollTop)-parseInt (obj. height)/2;
// Adjust the position of the background image when the magnifier moves, so that the center is moved to a certain point of the thumbnail, and the corresponding points on the background image are also moved to the center.
// Nx, Ny indicates the width and height of a large image, which are several times that of a small image. bgx and bgy indicate the X and Y coordinates when the background image is moved.
Nx = parseInt (document. all. getsize. width)/parseInt (document. all. bgLayer. width );
Bgx = (-1) * (Nx-1) * (event. x-parseInt (document. all. bgLayer. style. left) + parseInt (document. body. scrollLeft)-parseInt (obj. style. left) + parseInt (document. all. bgLayer. style. left );
Ny = parseInt (document. all. getsize. height)/parseInt (document. all. bgLayer. height );
Bgy = (-1) * (Ny-1) * (event. y-parseInt (document. all. bgLayer. style. top) + parseInt (document. body. scrollTop)-parseInt (obj. style. top) + parseInt (document. all. bgLayer. style. top );
Obj. style. backgroundPosition = bgx + "" + bgy;
}
}
// -->
</Script>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text /html; charset = gb2312 "> <title> magnifiers </title> </pead> <body bgcolor =" # FFFFFF "> <center> -- JS magnifiers display -- click" magnifiers "to start browsing, click Stop again. </Center> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
