JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动

　　修正了网上其它版本的一些错误。完美无错版

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>JS网页图片查看器－可控制图片放大缩小还原移动效果</title> 
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 
<style type="text/css"> 
body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } 
td { font-size: 12px; line-height: 150%; } 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20language%3DJavaScript%3E%20%0D%0Adrag%20%3D%200%20%0D%0Amove%20%3D%200%20%0D%0A%0D%0A%2F%2F%20%E6%8B%96%E6%8B%BD%E5%AF%B9%E8%B1%A1%20%0D%0A%2F%2F%20%E5%8F%82%E8%A7%81%EF%BC%9Ahttp%3A%2F%2Fblog.sina.com.cn%2Fu%2F4702ecbe010007pe%20%0D%0Avar%20ie%3Ddocument.all%3B%20%0D%0Avar%20nn6%3Ddocument.getElementById%26%26!document.all%3B%20%0D%0Avar%20isdrag%3Dfalse%3B%20%0D%0Avar%20y%2Cx%3B%20%0D%0Avar%20oDragObj%3B%20%0D%0A%0D%0Afunction%20moveMouse(e)%20%7B%20%0D%0Aif%20(isdrag)%20%7B%20%0D%0AoDragObj.style.top%20%3D%20(nn6%20%3F%20nTY%20%2B%20e.clientY%20-%20y%20%3A%20nTY%20%2B%20event.clientY%20-%20y)%2B%22px%22%3B%20%0D%0AoDragObj.style.left%20%3D%20(nn6%20%3F%20nTX%20%2B%20e.clientX%20-%20x%20%3A%20nTX%20%2B%20event.clientX%20-%20x)%2B%22px%22%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20initDrag(e)%20%7B%20%0D%0Avar%20oDragHandle%20%3D%20nn6%20%3F%20e.target%20%3A%20event.srcElement%3B%20%0D%0Avar%20topElement%20%3D%20%22HTML%22%3B%20%0D%0Awhile%20(oDragHandle.tagName%20!%3D%20topElement%20%26%26%20oDragHandle.className%20!%3D%20%22dragAble%22)%20%7B%20%0D%0AoDragHandle%20%3D%20nn6%20%3F%20oDragHandle.parentNode%20%3A%20oDragHandle.parentElement%3B%20%0D%0A%7D%20%0D%0Aif%20(oDragHandle.className%3D%3D%22dragAble%22)%20%7B%20%0D%0Aisdrag%20%3D%20true%3B%20%0D%0AoDragObj%20%3D%20oDragHandle%3B%20%0D%0AnTY%20%3D%20parseInt(oDragObj.style.top%2B0)%3B%20%0D%0Ay%20%3D%20nn6%20%3F%20e.clientY%20%3A%20event.clientY%3B%20%0D%0AnTX%20%3D%20parseInt(oDragObj.style.left%2B0)%3B%20%0D%0Ax%20%3D%20nn6%20%3F%20e.clientX%20%3A%20event.clientX%3B%20%0D%0Adocument.onmousemove%3DmoveMouse%3B%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Adocument.onmousedown%3DinitDrag%3B%20%0D%0Adocument.onmouseup%3Dnew%20Function(%22isdrag%3Dfalse%22)%3B%20%0D%0A%0D%0Afunction%20clickMove(s)%7B%20%0D%0Aif(s%3D%3D%22up%22)%7B%20%0D%0AdragObj.style.top%20%3D%20parseInt(dragObj.style.top)%20%2B%20100%3B%20%0D%0A%7Delse%20if(s%3D%3D%22down%22)%7B%20%0D%0AdragObj.style.top%20%3D%20parseInt(dragObj.style.top)%20-%20100%3B%20%0D%0A%7Delse%20if(s%3D%3D%22left%22)%7B%20%0D%0AdragObj.style.left%20%3D%20parseInt(dragObj.style.left)%20%2B%20100%3B%20%0D%0A%7Delse%20if(s%3D%3D%22right%22)%7B%20%0D%0AdragObj.style.left%20%3D%20parseInt(dragObj.style.left)%20-%20100%3B%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0Afunction%20smallit()%7B%20%0D%0Avar%20height1%3Dimages1.height%3B%20%0D%0Avar%20width1%3Dimages1.width%3B%20%0D%0Aimages1.height%3Dheight1%2F1.2%3B%20%0D%0Aimages1.width%3Dwidth1%2F1.2%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20bigit()%7B%20%0D%0Avar%20height1%3Dimages1.height%3B%20%0D%0Avar%20width1%3Dimages1.width%3B%20%0D%0Aimages1.height%3Dheight1*1.2%3B%20%0D%0Aimages1.width%3Dwidth1*1.2%3B%20%0D%0A%7D%20%0D%0Afunction%20realsize()%20%0D%0A%7B%20%0D%0Aimages1.height%3Dimages2.height%3B%20%0D%0Aimages1.width%3Dimages2.width%3B%20%0D%0Ablock1.style.left%20%3D%200%3B%20%0D%0Ablock1.style.top%20%3D%200%3B%20%0D%0A%0D%0A%7D%20%0D%0Afunction%20featsize()%20%0D%0A%7B%20%0D%0Avar%20width1%3Dimages2.width%3B%20%0D%0Avar%20height1%3Dimages2.height%3B%20%0D%0Avar%20width2%3D360%3B%20%0D%0Avar%20height2%3D200%3B%20%0D%0Avar%20h%3Dheight1%2Fheight2%3B%20%0D%0Avar%20w%3Dwidth1%2Fwidth2%3B%20%0D%0Aif(height1%3Cheight2%26%26width1%3Cwidth2)%20%0D%0A%7B%20%0D%0Aimages1.height%3Dheight1%3B%20%0D%0Aimages1.width%3Dwidth1%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aif(h%3Ew)%20%0D%0A%7B%20%0D%0Aimages1.height%3Dheight2%3B%20%0D%0Aimages1.width%3Dwidth1*height2%2Fheight1%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aimages1.width%3Dwidth2%3B%20%0D%0Aimages1.height%3Dheight1*width2%2Fwidth1%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Ablock1.style.left%20%3D%200%3B%20%0D%0Ablock1.style.top%20%3D%200%3B%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2FSCRIPT%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%20type%3D%22text%2FJavaScript%22%3E%20%0D%0A%3C!--%20%0D%0Afunction%20MM_reloadPage(init)%20%7B%20%2F%2Freloads%20the%20window%20if%20Nav4%20resized%20%0D%0Aif%20(init%3D%3Dtrue)%20with%20(navigator)%20%7Bif%20((appName%3D%3D%22Netscape%22)%26%26(parseInt(appVersion)%3D%3D4))%20%7B%20%0D%0Adocument.MM_pgW%3DinnerWidth%3B%20document.MM_pgH%3DinnerHeight%3B%20onresize%3DMM_reloadPage%3B%20%7D%7D%20%0D%0Aelse%20if%20(innerWidth!%3Ddocument.MM_pgW%20%7C%7C%20innerHeight!%3Ddocument.MM_pgH)%20location.reload()%3B%20%0D%0A%7D%20%0D%0AMM_reloadPage(true)%3B%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
 
</style> 
</head> 
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" style="overflow-y:hidden;overflow-x:hidden;"> 
<div id="Layer1"> 
<table border="0" cellspacing="2" cellpadding="0"> 
<tr> 
<td> </td> 
<td><img src="http://dl.glzy8.com/img/images/map/up.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fup.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td> 
<td> </td> 
</tr> 
<tr> 
<td><img src="http://dl.glzy8.com/img/images/map/left.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fleft.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td> 
<td><img src="http://dl.glzy8.com/img/images/map/zoom.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fzoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="还原"></td> 
<td><img src="http://dl.glzy8.com/img/images/map/right.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fright.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td> 
</tr> 
<tr> 
<td> </td> 
<td><img src="http://dl.glzy8.com/img/images/map/down.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fdown.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td><img src="http://dl.glzy8.com/img/images/map/zoom_in.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fzoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td> 
<td> </td> 
</tr> 
<tr> 
<td> </td> 
<td><img src="http://dl.glzy8.com/img/images/map/zoom_out.gif" _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2Fzoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td> 
<td> </td> 
</tr> 
</table> 
</div> 
<p>
 
<div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='http://dl.glzy8.com/img/images/map/760-480bsx.jpg' _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2F760-480bsx.jpg" border='0'></div> 
<div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 0; left: 0px; position: absolute; top: 0px; width: 0' class="dragAble"> <img name='images1' src='http://dl.glzy8.com/img/images/map/760-480bsx.jpg' _ewebeditor_ta_src="http%3A%2F%2Fimg.glzy8.com%2Fimages%2Fmap%2F760-480bsx.jpg" border='0'></div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程