网站简介：提供div+css网站标准化重构技术学习教程资料下载其中包括：float,padding,margin,position,background等的使用方法

当前位置：网站标准化 >> JAVASCRIPT >> 正文

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

来源：本站原创点击：时间：2007年05月21日论坛讨论 [字号：大中小]

比较常见的一个图片查看器，网上用的比较多，
原先只是支持IE，现在修改了一下让其能够支持IE firefox等浏览器，放上来大家分享一下。
图片样式：

代码：

<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>

上篇：兼容IE firefox的拖拽对象
下篇：表格排序 sortTable