发信人: morefeetin(毛·狒·甜)
整理人: eagle(2001-07-09 19:37:40), 站内信件
|
前两天想实现这个效果,就自己写了一个。
代码挺粗糙的,不过功能是实现了。
把Align_Layer()函数加到body onload()和body onresize()里面,就可以实现层相对于表格定位了。
可能有不少人要这个,我就贴出来吧。
写成的html有3个按钮,试一试就知道了。
代码如下:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
function Align_Layer(theLayer) {
var theWidth
theWidth=(document.body.clientWidth-320)/2
theLayer.style.left=theWidth+"px"
}
function Get_Broswer_Width() {
alert(document.body.clientWidth)
}
function Get_Layer_Left(LayerName) {
alert(LayerName.style.left)
}
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onResize="Align_Layer(Layer1)">
<div id="Layer1" style="BACKGROUND-COLOR: #00cc00; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; HEIGHT: 50px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 120px; Z-INDEX: 1; layer-background-color: #00CC00">
good morning!
good morning!
good morning!
good morning!
good morning!
good morning!
good morning!
good morning!
</div>
<div align="center">
<table width="320" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<P><INPUT id=button1 name=button1 type=button value="Alert the window width!" onclick="Get_Broswer_Width()">
</P>
<P><INPUT id=button2 name=button2 type=button value="Move the layer with the table???" onclick="Align_Layer(Layer1)"></P>
<P><INPUT id=button3 name=button3 type=button value="Alert the layer left!" onclick="Get_Layer_Left(Layer1)"></P>
</body>
</html>
----
:图形版版主:
:网站建设版副:
ICQ:102630483
|
|