javascript关于层的操作
来源：互联网 发布：干数据维护工资多少 编辑：程序博客网 时间：2024/05/23 20:09
打开层和关闭层
<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="打开层" onclick="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" onclick="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" onmouseover="showDetails()"/>
<div style="display:none;position:absolute;" id="details">
<img src="da.jpg" />
<p>身高：177</p>
<p>昵称：可爱</p>
<p><input type="button" value="关闭" onclick="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="打开层" onclick="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" onclick="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" onmouseover="showDetails()"/>
<div style="display:none;position:absolute;" id="details">
<img src="da.jpg" />
<p>身高：177</p>
<p>昵称：可爱</p>
<p><input type="button" value="关闭" onclick="hideDetail()"/></p>
</div>
</body>
</html>
还有版本2：动态加载图片
0 0
- javascript关于层的操作
- javascript 关于窗口的操作
- javascript关于xml的操作
- 使用Javascript创建付款操作的弹出层
- 关于数据库持久层操作 的开源项目
- 关于数据库持久层操作的开源项目
- 关于spring在controller层的事务操作
- JavaScript中关于窗口的常用操作
- Javascript关于页面返回的相关操作
- Javascript关于数组的一些操作
- 关于javascript 操作光标
- 关于javascript操作html
- 关于javascript对象的点操作符和[]操作符
- 层的操作
- 关于层的问题
- javascript操作DOM点击登陆显示登陆的层的窗口
- JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）
- javascript实现层的拖动
- 关于数据类型转换的小结
- Ｃ＃基础
- HDU1576-A/B（乘法逆元+exgcd）
- SJGestureUnlock快速集成手势解锁
- 数论 FZU 1759 Super A^B mod C
- javascript关于层的操作
- [iOS]SDWebImage 源码阅读（二）缓存
- BZOJ 1306: [CQOI2009]match循环赛
- 一张图片的不同颜色的实现
- 深入浅出区块链系统：第一章
- JS 之 （三）作用域链、闭包、面向对象
- 苹果设备按钮样式没效果问题
- Hibernate异常处理
- 【JZOJ4770】【NOIP2016提高A组模拟9.9】闭门造车
