JavaScript image enlargement effect and code description_image special effects-JS Tutorial-php.cn

<div id="magnifier">
<img  src="http://files.jb51.net/upload/20091024012932942.jpg" id="img" alt="JavaScript image enlargement effect and code description_image special effects" >
<div id="Browser">
</div>
</div>
<div id="mag">
<img  id="magnifierImg" alt="JavaScript image enlargement effect and code description_image special effects" >
</div>
<select style="position:absolute;top:200px;left:650px;width:100px;">
<option>
</option>select test<option>
</option>Whether it can be covered</select>

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]
[Program description ]

is mainly a magnifier class, the main methods in it are:
init: running method
start: it is the event processing of the mouse moving into the div
move: it is the mouse moving in the div Event processing
end: Event processing after the mouse moves out
[Program introduction]

Main idea: When the mouse moves into the picture, the DIV of the enlargement layer appears, and then according to The mouse movement changes the top and left values of the image in the magnification layer, so that the two places maintain a consistent reality. The width and height values of the two images are set according to the proportion to produce an enlargement effect. Details below Explanation:

In the init method, it mainly deals with the size of the browsing box div layer, the size of the magnification box and the size of the enlarged image.
The width and height of the browsing box div are based on the size of the original image. /The ratio value can be obtained, see the code:

Copy the code

The code is as follows:

 
 css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0] is the browsing box
'display' : 'none', //Start setting Invisible 
'width' : m.cont.clientWidth / m.scale - borderWid 'px', //The width/proportion value of the original image - the width of the border 
'height' : m.cont.clientHeight / m.scale - borderWid 'px', ////Height/proportion value of the original image - width of border 
'opacity' : 0.5 //Set transparency 
}) 

The size of the magnification box is set to the same size as the original image. The code is as follows:

Copy the code

The code is as follows:

 

css(m.mag,{ 
'display' : 'none', 
'width' : m.cont.clientWidth 'px', //m.cont is the original image 
'height' : m.cont.clientHeight 'px', 
'position' : 'absolute', 
'left' : m.cont.offsetLeft m.cont.offsetWidth 10 'px', / /The position of the magnification box is 10px far to the right of the original image 
'top' : m.cont.offsetTop 'px' 
}) 

The size of the enlarged image is, the original image Size*ratio value, the code is as follows:

Copy code

The code is as follows:

 
css (m.img,{ 
'position' : 'absolute', 
'width' : (m.cont.clientWidth * m.scale) 'px', //The width* ratio value of the original image
'height' : (m.cont.clientHeight * m.scale) 'px' //High* scale value of the original image
}) 

Since magnification is based on the ratio, careful calculation is required on the browsing box and the enlarged image. This is one of the main ideas of this program.

In the first program written, Onmouseover is omitted directly, because using onmousemove directly can satisfy the function. This time onmouseover is used to avoid encountering select during use. Under IE6, select cannot set the z-Index value, causing the sudden appearance of the magnification box. The select cannot be overridden. The details are discussed below.

In the move method, the most important thing is that if the mouse is moving, the browsing box will move with the mouse, and the enlarged image will also move, making the image enlarged. The displayed range is consistent with the original image position of the browsing box.
First let’s talk about the browsing box following the movement of the mouse. The main code is as follows: