Magnifier JS Implementation Effect

Today I want to write a magnifying glass because after all, in the Web page, especially some of the e-Commerce Details page Magnifier is essential. Don't say anything. On the code

1,html Code

1 <DivID= ' small '><imgsrc= "2.jpg"alt=""width= ' 100% '><DivID= ' Move '></Div></Div>2     <ulID= "Images">3         <Li><imgclass= "IMGs"src= "2.jpg"alt=""width= "100%"></Li>4         <Li><imgclass= "IMGs"src= "3.jpg"alt=""width= "100%"></Li>5         <Li><imgclass= "IMGs"src= "4.jpg"alt=""width= "100%"></Li>6         7     </ul>8     <DivID= ' big '><imgsrc= "2.jpg"alt=""ID= ' img '></Div>

2,CSS Code

1 <style>2 *{margin:0;padding:0;List-style:None; }3 #small{width:400px;Height:400px;Border:1px solid Black;position:Absolute; Left:50px;Top:50px;}4 #move{width:100px;Height:100px;position:Absolute; Left:0;Top:0;background:URL (bg.png);Display:None;}5 #images{position:Absolute;Top:460px; Left:60px;width:1000px;Height:100px;}6 #images Li{width:80px;Height:80px;float: Left;Margin-right:10px;Border:Solid 1px #333;padding:4px;}7 #big{width:400px;Height:400px;Border:1px solid Black;position:Absolute; Left:500px;Top:50px;Overflow:Hidden;Display:None;}8 #big #img{position:Absolute; Left:-100px;}9 </style>

3,js Code

1<script>2          varsmall = document.getElementById (' small '));3          varBig = document.getElementById (' Big ');4          varmove = document.getElementById (' Move ');5          varimg = document.getElementById (' img '))6         7          //1 Picture Replacement8          varList =Images.children;9          //Console.log (list);Ten           for(vari=0;i<list.length;i++){ OneList[i].onclick =function (){ A                  varsrc = This. firstelementchild.src; -                  //the picture resource of the small picture big picture has to replace -SMALL.FIRSTELEMENTCHILD.SRC =src; theBIG.FIRSTELEMENTCHILD.SRC =src; -              } -          } -          //2 Mouse Movement +Small.onmousemove =function(ENT) { -              //Large box display Magnifier display +Big.style.display = "Block"; AMove.style.display = "Block"; at  -              //get the mouse -              varent = ENT | |window.event; -  -              //Magnifier cannot be out of box range -              varMinX = 0; in              varMaxX = small.offsetwidth-Move.offsetwidth; -              varMiny = 0; to              varMaxy = small.offsetheight-Move.offsetheight; +  -              if(ent.clientx-move.offsetwidth<MinX) {//e.pagex theMove.style.left = "0px"; *}Else if(ent.clientx-move.offsetwidth>MaxX) {//e.pagex $Move.style.left =maxx+ "px";Panax Notoginseng}Else{ -Move.style.left = (ent.clientx-move.offsetwidth) + "px";//e.pagex the              } +  A              if(ent.clienty-move.offsetheight<miny) {//e.pagey theMove.style.top = "0px"; +}Else if(ent.clienty-move.offsetheight>Maxy) {//e.pagey -Move.style.top =maxy+ "px"; $}Else{ $Move.style.top = (ent.clienty-move.offsetheight) + "px";//e.pagey -              } -  the  -              //The big box moves with the mouse positionWuyiBig.scrolltop = (ent.clienty-small.offsettop) *2.5-200;//e.pagey theBig.scrollleft = (ent.clientx-small.offsetleft) *2.5-250;//e.pagex -  Wu             //the position of the magnifying glass (the box range will be out) -             //move.style.left = (ent.clientx-move.offsetwidth) + "px"; About              //move.style.top = (ent.clienty-move.offsetheight) + "px"; $  -              //Add a mouse style -Small.style.cursor = "Move"; -  A          } +          //3 mouse Move out theSmall.onmouseout =function(){ -              //big box \ Magnifier disappears $Big.style.display = "None"; theMove.style.display = "None"; the              //Restore Default Styles theSmall.style.cursor = "Default"; the          } -</script>

Principle:

As long as we calculate the position of the magnifying glass, in fact the magnifying glass is not difficult here to pay special attention to a little, e.clientx/clienty and e.pagex/pagey the difference between the two, otherwise in the magnifying glass will appear when the bug.

OK today Magnifier write here tomorrow we write jquery magnifier.

Magnifier JS Implementation Effect