一个图片查看器支持IE FF，

最新推荐文章于 2026-01-01 20:08:21 发布

原创最新推荐文章于 2026-01-01 20:08:21 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #function #border #div #html #javascript

本文介绍了一个用于浏览温州旅游资源的地图应用，提供了地图缩放和平移等功能，并详细解释了如何通过简单的JavaScript实现这些交互操作。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浙江温州温州市高清晰温州旅游资源图市区地图</title>


<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="return false" onselectstart ="return false" onselect="return false" oncopy="return false" onbeforecopy="return false" onmouseup="return false">
<div id="Layer2"></div>
<div id="Layer1">
<table border="0" cellspacing="2" cellpadding="0" class="ctrler">
    <tr>
    <td> </td>
    <td><img src="http://www.maptown.cn/Images/mapicon/up.gif" onClick="clickMove('up')" title="向上"></td>
    <td> </td>
    </tr>
    <tr>
    <td><img src="http://www.maptown.cn/Images/mapicon/left.gif" onClick="clickMove('left')" title="向左"></td>
    <td><img src="http://www.maptown.cn/Images/mapicon/zoom.gif" onClick="realsize();" title="还原"></td>
    <td><img src="http://www.maptown.cn/Images/mapicon/right.gif" onClick="clickMove('right')" title="向右"></td>
    </tr>
    <tr>
    <td> </td>
    <td><img src="http://www.maptown.cn/Images/mapicon/down.gif" onClick="clickMove('down')" title="向下"></td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td><img src="http://www.maptown.cn/Images/mapicon/zoom_in.gif" onClick="bigit();" title="放大"></td>
    <td> </td>
    </tr>
    <tr>
    <td> </td>
    <td><img src="http://www.maptown.cn/Images/mapicon/zoom_out.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='http://www.maptown.cn/EnCodeImage/L1VwbG9hZC9GaWxlc3MvamlhbmdhNjEwNi5qcGcHoTeL.jpg' border='0'>
</div>
<div id='block1' onmouseout='drag=0' onmouseover='XdragObj=block1;drag=1;' style='z-index:10;height:60; left:0; position:absolute;top:0;width:120' class="dragAble">
    <img id='images1' src='http://www.maptown.cn/EnCodeImage/L1VwbG9hZC9GaWxlc3MvamlhbmdhNjEwNi5qcGcHoTeL.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>