In Flash we use a mask and a few simple scripts to implement a dynamic picture Magnifier. Now we can easily do this with JavaScript and CSS.
Production Ideas: "Magnifier" has a background image, it is "enlarged" the original diagram. When we move the Magnifier, we adjust the position of the background map so that it shows exactly what is needed to enlarge it.
Effect Demo: (Click here to view in new window)
Production Steps：
1 First prepare two pictures of the same size, here we find a 400x300 pixel thumbnail small_hill.gif, a large image of 800x600 pixel big_hill.gif. Then prepare a picture of a "magnifying glass" and note that the middle part must be transparent, and here we have a green box viewer.gif.
2) write the following code:
Here are two diagrams of code, all of them as layers. The first is a thumbnail, the second is a "magnifying glass" that first moves its background to an invisible place, where "onclick=" moveme=!moveme "means that each click changes the Boolean value of" Moveme ".
"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 are JavaScript scripts:
<script language= "JavaScript" >
<!--
varViewer_bgcolor="#FFFFFF";//Magnifier background color, it is recommended to set the same background color as the page.
varBigmap="Big_hill.gif";//Large map path
Document. All. myviewer.style.backgroundImage=' url ('+Bigmap+')';
Document. All. myviewer.style.backgroundColor=Viewer_bgcolor;
//Because a large image cannot be set and read its dimensions as a background, it has to have a copy of it as a real picture but not visible:
Document.Write(' position:absolute left:-2000px; top:-2000px; "Src="+Bigmap+' > ');
varMoveme=false;//The Boolean value determines whether the Magnifier moves with the mouse, and the initial value is no
functionViewit(Obj){
if (Moveme){
//The following two lines control the move of 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;
//The following line adjusts the position of the background chart when the Magnifier moves to move its center to a point in the thumbnail, and the corresponding point on its background map moves to its center.
The nx,ny refers to the large image width and height respectively is a small figure of several times, Bgx,bgy is the background map when moved to the x,y coordinates.
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> magnifier </title> </pead> <body bgcolor=" #FFFFFF "> <center>--js Large Mirror Display-click Magnifier to start browsing and click Stop again. </center> <!--thumbnails and magnifier--> <script language= "JavaScript" > var viewer_bgcolor= "#FFFFFF"; The background color of Magnifier is recommended to be the same as the background color of the Web page. var bigmap= "Http://www.softpure.com/soft/work/jsviewer/big_hill.gif"; Large map path document.all.myviewer.style.backgroundimage= ' url (' +bigmap+ ') '; Document.all.myviewer.style.backgroundcolor=viewer_bgcolor; document.write ("); var Moveme=false; function Viewit (obj) {if (moveme) {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; 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> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
