比较常见的一个图片查看器，网上用的比较多， 原先只是支持IE，现在修改了一下让其能够支持IE firefox等浏览器，放上来大家分享一下。 图片样式： 代码： <html> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>浙江温州温州市 高清晰温州旅游资源图 市区地图</title> <!-- http://www.maptown.cn/China/View/MjQxNjQHoTeL/index.html --> <style type="text/css"> body{margin:0;padding:0;overflow:hidden;} td,a{font-size:12px;color:#000000} #Layer1 {position:absolute;z-index:100;} #Layer2 {position:absolute;z-index:1;} .ctrler{width:20px;height:20px;cursor:hand;} </style> </head> <body ondragstart_fckprotectedatt="%20ondragstart%3D%22return%20false%22" onselectstart_fckprotectedatt="%20onselectstart%20%3D%22return%20false%22" onselect_fckprotectedatt="%20onselect%3D%22return%20false%22" oncopy_fckprotectedatt="%20oncopy%3D%22return%20false%22" onbeforecopy_fckprotectedatt="%20onbeforecopy%3D%22return%20false%22" onmouseup_fckprotectedatt="%20onmouseup%3D%22return%20false%22"> <div id="Layer2"></div> <div id="Layer1"> <table border="0" cellspacing="2" cellpadding="0" class="ctrler"> <tr> <td> </td> <td><img src="/f/remotepic/20084182637137999.gif" onClick="clickMove('up')" title="向上"></td> <td> </td> </tr> <tr> <td><img src="/f/remotepic/20084187411914268.gif" onClick="clickMove('left')" title="向左"></td> <td><img src="/f/remotepic/20084185763934118.gif" onClick="realsize();" title="还原"></td> <td><img src="/f/remotepic/20084182085264235.gif" onClick="clickMove('right')" title="向右"></td> </tr> <tr> <td> </td> <td><img src="/f/remotepic/20084187995025426.gif" onClick="clickMove('down')" title="向下"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="/f/remotepic/20084186647954753.gif" onClick="bigit();" title="放大"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="/f/remotepic/20084182004400314.gif" onClick="smallit();" title="缩小"></td> <td> </td> </tr> </table> </div> <div id='hiddenPic' style='position:absolute;left:433px;top:258px; width:77px;height:91px;z-index:1;visibility:hidden;'> <img id='images2' src='/f/remotepic/20084188742882054.jpg' border='0'><!-- 还原图片大小时用 --> </div> <div id='block1' onmouseout_fckprotectedatt="%20onmouseout%3D'drag%3D0'" onmouseover_fckprotectedatt="%20onmouseover%3D'XdragObj%3Dblock1%3Bdrag%3D1%3B'" style='z-index:10;height:60; left:0; position:absolute;top:0;width:120' class="dragAble"> <img id='images1' src='/f/remotepic/20084188742882054.jpg' border='0' ><!-- 目标图片 --> </div> </body> </html> <script language=javascript> drag = 0; move = 0; var $id=function(o){return document.getElementById(o);} var dragObj = $id('block1'); 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=$id('images1').height; var width1=$id('images1').width; $id('images1').height=height1/1.2; $id('images1').width=width1/1.2; } function bigit(){ //放大 var height1=$id('images1').height; var width1=$id('images1').width; $id('images1').height=height1*1.2; $id('images1').width=width1*1.2; } function realsize() { //恢复大小 $id('images1').height=$id('images2').height; $id('images1').width=$id('images2').width; block1.style.left = 0; block1.style.top = 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"); </script>
