📄 13.12.htm
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cross-browser Layer Tester</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="layerlib.js"></script>
</head>
<body>
<!--设置2个<div>，进行后面相应的操作-->
<div id="region1" style="position: absolute; top: 10px; left: 300px;
width: 100px; height: 100px;
background-color: #ffff99; z-index: 10;">
I am positioned!
</div>
<div id="region2" style="position: absolute; top: 10px; left: 275px;
width: 50px; height: 150px;
background-color:#33ff99; z-index: 5;">
Fixed layer at z-index 5 to test z-index
</div>
<br><br><br><br><br><br>
<hr>
<form name="testform" id="testform" action="#" method="get">
可见度:
<!--通过onclick分别调用show ()函数和hide()，进行可见度设置-->
<input type="button" value="显示" onclick="show('region1');">
<input type="button" value="隐藏" onclick="hide('region1');">
<br><br>
<!--通过onclick调用setX()函数，进行x设置-->
x: <input type="text" value="300" name="x" id="x" size="4">
<input type="button" value="设置"
onclick="setX('region1',document.testform.x.value);">
<!--通过onclick调用setY()函数，进行y设置-->
y: <input type="text" value="10" name="y" id="y" size="4">
<input type="button" value="设置"
onclick="setY('region1',document.testform.y.value);">
<!--通过onclick调用setZ()函数，进行z设置-->
z: <input type="text" value="10" name="z" id="z" size="4">
<input type="button" value="设置"
onclick="setZ('region1',document.testform.z.value);">
<br><br>
高度: <input type="text" value="100" name="height" id="height" size="4">
<!--通过onclick调用setHeight()函数，进行高度设置-->
<input type="button" value="设置"
onclick="setHeight('region1',document.testform.height.value);">
宽度: <input type="text" value="100" name="width" id="width" size="4">
<!--通过onclick调用setHeight()函数，进行宽度设置-->
<input type="button" value="设置"
onclick="setWidth('region1',document.testform.width.value);">
<br><br>
矩形裁切: <br>
<!--输入新矩形的四边的坐标，作为矩形裁切的参数-->
上: <input type="text" value="0" name="top" id="top" size="4">
左: <input type="text" value="0" name="left" id="left" size="4">
下: <input type="text" value="100" name="bottom" id="bottom" size="4">
右: <input type="text" value="100" name="right" id="right" size="4">
<!--通过onclick调用setClip()函数，进行矩形裁切设置-->
<input type="button" value="设置"
onclick="setClip('region1',document.testform.top.value,
document.testform.right.value, document.testform.bottom.value,
document.testform.left.value);">
<br><br>
<input type="text" name="newcontent" id="newcontent" size="40" value="I am positioned!">
<!--通过onclick调用setContents()函数，进行内容设置-->
<input type="button" value="设置内容"
onclick="setContents('region1',document.testform.newcontent.value);">
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -