打开层和关闭层
<head>
<title>无标题页</title>
<script type="text/javascript">
function Show(btn)
{
var div1=document.getElementById("div1");
if(btn.value=="打开层")
{
div1.style.display='';//display为空,显示层
btn.value="关闭层";
}
else
{
div1.style.display='none';//display为none,关闭层
btn.value="打开层";
}
}
</script>
</head>
<body>
<input id="Button1" type="button" value="打开层" οnclick="Show(this)"/>
<div id="div1" style="display:none">这里显示层中的内容</div>
</body>
</html>
案例:点击登录显示登录的层
<head>
<title>点击登陆显示登陆的层的窗口</title>
<script type="text/javascript">
function showLogin(){
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display="";
}
function hideLogin(){
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display="none";
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登陆</a>
<div style="position:absolute;top:200px;left:200px;border:solid 1px green;display:none;" id="loginDiv">
<img src="close.jpg" style="float:right" οnclick="hideLogin()"/>
<table>
<tr>
<td>
<label for="username">用户名</label>
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">密 码</label>
</td>
<td>
<input type="password" id="password"/>
</td>
</tr>
</table>
</div>
</body>
</html>
层的操作:
A、位置
position:static、absolute、relativa
div.style.top/left
B、大小
div.style.height/weight
案例:
点击小图,显示详细大图
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS操作DOM点击图片弹出层显示大图片和详细信息</title>
<script type="text/javascript">
function showDetails(){
var details = document.getElementById("details");
details.style.display='';
details.style.left = window.event.clientX;
details.style.top = window.event.clientY;
}
function hideDetail(){
var details = document.getElementById("details");
details.style.display='none';
}
</script>
</head>
<body>
<img src="xiao.jpg" οnmοuseοver="showDetails()"/>
<div style="display:none;position:absolute;" id="details">
<img src="da.jpg" />
<p>身高:177</p>
<p>昵称:可爱</p>
<p><input type="button" value="关闭" οnclick="hideDetail()"/></p>
</div>
</body>
</html>
还有版本2:动态加载图片
<head>
<title>无标题页</title>
<script type="text/javascript">
function Show(btn)
{
var div1=document.getElementById("div1");
if(btn.value=="打开层")
{
div1.style.display='';//display为空,显示层
btn.value="关闭层";
}
else
{
div1.style.display='none';//display为none,关闭层
btn.value="打开层";
}
}
</script>
</head>
<body>
<input id="Button1" type="button" value="打开层" οnclick="Show(this)"/>
<div id="div1" style="display:none">这里显示层中的内容</div>
</body>
</html>
案例:点击登录显示登录的层
<head>
<title>点击登陆显示登陆的层的窗口</title>
<script type="text/javascript">
function showLogin(){
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display="";
}
function hideLogin(){
var loginDiv = document.getElementById("loginDiv");
loginDiv.style.display="none";
}
</script>
</head>
<body>
<a href="javascript:showLogin()">登陆</a>
<div style="position:absolute;top:200px;left:200px;border:solid 1px green;display:none;" id="loginDiv">
<img src="close.jpg" style="float:right" οnclick="hideLogin()"/>
<table>
<tr>
<td>
<label for="username">用户名</label>
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr>
<td>
<label for="password">密 码</label>
</td>
<td>
<input type="password" id="password"/>
</td>
</tr>
</table>
</div>
</body>
</html>
层的操作:
A、位置
position:static、absolute、relativa
div.style.top/left
B、大小
div.style.height/weight
案例:
点击小图,显示详细大图
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS操作DOM点击图片弹出层显示大图片和详细信息</title>
<script type="text/javascript">
function showDetails(){
var details = document.getElementById("details");
details.style.display='';
details.style.left = window.event.clientX;
details.style.top = window.event.clientY;
}
function hideDetail(){
var details = document.getElementById("details");
details.style.display='none';
}
</script>
</head>
<body>
<img src="xiao.jpg" οnmοuseοver="showDetails()"/>
<div style="display:none;position:absolute;" id="details">
<img src="da.jpg" />
<p>身高:177</p>
<p>昵称:可爱</p>
<p><input type="button" value="关闭" οnclick="hideDetail()"/></p>
</div>
</body>
</html>
还有版本2:动态加载图片