js放大图片
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{padding:0;margin:0} 8 #smallbox{border:0px;float:left;width:0;height:0;} 9 #bigbox{border:0px #c33 solid;width:0px;height:0px;float:left;overflow:hidden} 10 #view{border:1px #ddd solid;width:0px;height:0px;position:absolute} 11 </style> 12 <script language="JavaScript"> 13 var bigX = 300; //预览窗大小,可以任意设置 14 var bigY = 300; 15 var smallX = 300; //缩略图宽度 16 var smallY = 225; 17 var srcX = 1024; //原图大小,可以任意设置 18 var srcY = smallY * srcX / smallX; 19 20 var viewX = bigX / srcX * smallX; //预览范围 21 var viewY = bigY / srcY * smallY; 22 var bl = srcX / smallX;//缩小比例 23 var border = 1; //边框 24 25 window.onload=function (){ 26 var smallpic = document.getElementById("smallpic"); 27 smallpic.width=smallX; 28 smallpic.height=smallY; 29 var bigpic = document.getElementById("bigpic"); 30 bigpic.width=srcX; 31 bigpic.height=srcY; 32 var view = document.getElementById("view"); 33 view.style.width=viewX +"px";//注意这里需要填写px，否则chrome不支持 34 view.style.height=viewY +"px"; 35 var smallbox = document.getElementById("smallbox"); 36 smallbox.style.borderWidth=border; 37 var bigbox = document.getElementById("bigbox"); 38 bigbox.style.borderWidth=border; 39 if (window.event){ 40 smallbox.style.width=smallpic.offsetWidth+border*2 +"px"; 41 smallbox.style.height=smallpic.offsetHeight+border*2 +"px"; 42 bigbox.style.width=bigX+border*2 +"px"; 43 bigbox.style.height=bigY+border*2 +"px"; 44 }else{ 45 smallbox.style.width=smallpic.offsetWidth +"px"; 46 smallbox.style.height=smallpic.offsetHeight +"px"; 47 bigbox.style.width=bigX +"px"; 48 bigbox.style.height=bigY +"px"; 49 } 50 } 51 function move(event){ 52 var bigpico = document.getElementById("bigpico"); 53 var smallbox = document.getElementById("smallbox"); 54 var e = window.event?window.event:event; 55 var iebug = 0; 56 document.getElementById("bigbox").style.display="block"; 57 document.getElementById("view").style.display="block"; 58 var view = document.getElementById("view"); 59 if (window.event){ 60 var vX = e.offsetX - viewX/2; 61 var vY = e.offsetY - viewY/2; 62 }else{ 63 64 var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border; 65 var vY = e.pageY - viewY/2 - smallbox.offsetTop - border; 66 iebug = 2; 67 } 68 if (vX < 0) vX = 0; 69 if (vY < 0) vY = 0; 70 if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug; 71 if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug; 72 bigpico.style.marginLeft = - vX * bl +"px"; 73 bigpico.style.marginTop = - vY * bl +"px"; 74 view.style.left = vX + smallbox.offsetLeft + border +"px"; 75 view.style.top = vY + smallbox.offsetTop + border +"px"; 76 } 77 function out(){ 78 document.getElementById("bigbox").style.display="none"; 79 document.getElementById("view").style.display="none"; 80 } 81 </script> 82 </head> 83 </body> 84 <div id="smallbox"> 85 <img id="smallpic" src="1.jpg" border="0" onmousemove="move(event)" onmouseout="out()"> 86 </div> 87 <div id="bigbox" style="display:none"> 88 <div id="bigpico"> 89 <img id="bigpic" src="1.jpg" border="0"> 90 </div> 91 </div> 92 <div id="view" onmousemove="move(event)" onmouseout="out()" style="display:none"> 93 </div> 94 </body> 95 </html>
本实例可以实现地图放大功能，这里需要注意的是：在设置style的这些属性时，需要后面加上px，否则chrome浏览器不支持
