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> <SCRIPT language=JavaScript> drag = 0 move = 0 // 拖拽对象 // 参见：http://blog.sina.com.cn/u/4702ecbe010007pe var ie=document.all; var nn6=document.getElementById&&！document.all; var isdrag=false; var y,x; var oDragObj; function moveMouse（e） { if （isdrag） { oDragObj.style.top = （nn6 ？ nTY + e.clientY - y : nTY + event.clientY - y）+"px"; oDragObj.style.left = （nn6 ？ nTX + e.clientX - x : nTX + event.clientX - x）+"px"; return false; } } function initDrag（e） { var oDragHandle = nn6 ？ e.target : event.srcElement; var topElement = "HTML"; while （oDragHandle.tagName ！= topElement && oDragHandle.className ！= "dragAble"） { oDragHandle = nn6 ？ oDragHandle.parentNode : oDragHandle.parentElement; } if （oDragHandle.className=="dragAble"） { isdrag = true; oDragObj = oDragHandle; nTY = parseInt（oDragObj.style.top+0）; y = nn6 ？ e.clientY : event.clientY; nTX = parseInt（oDragObj.style.left+0）; x = nn6 ？ e.clientX : event.clientX; document.onmousemove=moveMouse; return false; } } document.onmousedown=initDrag; document.onmouseup=new Function（"isdrag=false"）; function clickMove（s）{ if（s=="up"）{ dragObj.style.top = parseInt（dragObj.style.top） + 100; }else if（s=="down"）{ dragObj.style.top = parseInt（dragObj.style.top） - 100; }else if（s=="left"）{ dragObj.style.left = parseInt（dragObj.style.left） + 100; }else if（s=="right"）{ dragObj.style.left = parseInt（dragObj.style.left） - 100; } } function smallit（）{ var height1=images1.height; var width1=images1.width; images1.height=height1/1.2; images1.width=width1/1.2; } function bigit（）{ var height1=images1.height; var width1=images1.width; images1.height=height1*1.2; images1.width=width1*1.2; } function realsize（） { images1.height=images2.height; images1.width=images2.width; block1.style.left = 0; block1.style.top = 0; } function featsize（） { var width1=images2.width; var height1=images2.height; var width2=360; var height2=200; var h=height1/height2; var w=width1/width2; if（height1<height2&&width1<width2） { images1.height=height1; images1.width=width1; } else { if（h>w） { images1.height=height2; images1.width=width1*height2/height1; } else { images1.width=width2; images1.height=height1*width2/width1; } } block1.style.left = 0; block1.style.top = 0; } </SCRIPT> <script language="JavaScript" type="text/JavaScript"></script> <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;"><table border="0" cellspacing="2" cellpadding="0"> <tr> <td> </td> <td><img src="http://img.jb51.net/images/map/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove（"up"）" title="向上"></td> <td> </td> </tr> <tr> <td><img src="http://img.jb51.net/images/map/left.gif" width="20" height="20" style="cursor:hand" onClick="clickMove（"left"）" title="向左"></td> <td><img src="http://img.jb51.net/images/map/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize（）;" title="还原"></td> <td><img src="http://img.jb51.net/images/map/right.gif" width="20" height="20" style="cursor:hand" onClick="clickMove（"right"）" title="向右"></td> </tr> <tr> <td> </td> <td><img src="http://img.jb51.net/images/map/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove（"down"）" title="向下"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="http://img.jb51.net/images/map/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit（）;" title="放大"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="http://img.jb51.net/images/map/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit（）;" title="缩小"></td> <td> </td> </tr> </table> <img name="images2" src="http://img.jb51.net/images/map/760-480bsx.jpg" border="0"><img name="images1" src="http://img.jb51.net/images/map/760-480bsx.jpg" border="0"> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]