快捷導航

JS網(wǎng)頁圖片查看器(兼容IE、FF)可控制圖片放大縮小移動

更新時間：2008年11月17日 16:22:05 作者：

這是一個網(wǎng)上比較常用的JS網(wǎng)頁圖片查看器，可控制圖片放大、縮小、還原、移動位置、拖動等操作，并且兼容IE瀏覽器和FF火狐瀏覽器，可以用在圖片網(wǎng)站、地圖網(wǎng)站等

修正了網(wǎng)上其它版本的一些錯誤。完美無錯版

<html> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>JS網(wǎng)頁圖片查看器－可控制圖片放大縮小還原移動效果</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>   <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   class="wppm3vysvbp"   id="Layer1"> <table border="0" cellspacing="2" cellpadding="0"> <tr> <td>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</td> </tr> <tr> <td>&nbsp;</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>&nbsp;</td> </tr> <tr> <td>&nbsp;</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>&nbsp;</td> </tr> </table> </div> <p> <div   class="wppm3vysvbp"   id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='http://img.jb51.net/images/map/760-480bsx.jpg' border='0'></div> <div   class="wppm3vysvbp"   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://img.jb51.net/images/map/760-480bsx.jpg' border='0'></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: