例1：通过display隐藏盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
.li{
list-style:none;
}
#p1{
width:200px;
text-align:center;
font:30px/60px "simhei";
}
#p2{
width:200px;
border:1px solid black;
}
ul{
margin-top:10px;
border:1px solid black;
display:none;
}
li{
height:60px;
}
li:hover{
background-color:blue;
color:white;
}
</style>
</head>
<html>
<p id ="p1">
<p id="p2">设置</p>
<ul id="oul">
<li>搜索设置</li>
<li>高级设置</li>
<li>关闭预测</li>
<li>搜索历史</li>
</ul>
</p>
</html>
<script>
document.getElementById('p1').onmouseover=function(){
document.getElementById('oul').style.display='block';
}
document.getElementById('p1').onmouseout=function(){
document.getElementById('oul').style.display='none';
}
</script>
</html>当通过变量名var可以 继续实现：
var op1=document.getElementById('p1');
var oul=document.getElementById('oul');
op1.onmouseover=function(){
oul.style.display='block';
}
op1.onmouseout=function(){
oul.style.display='none';
}也可以通过透明的opacity,和高度来控制隐藏和显示。
制作百度登录效果，点击登录，弹出登录窗口，及退出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
body{
border:1px solid white
}
#login{
width:300px;
height:300px;
background-color:yellow;
margin:0px auto;
margin-top:200px;
display:none;
}
.classclose{
width:40px;
height:20px;
font:16px/20px "simhei";
text-align:center;
background-color:red;
cursor:pointer;
float:right;
}
</style>
</head>
<body>
<p id="box" class="classclose">登录</p>
<p id ="login">
<p id="close" class="classclose">退出</p>
</p>
</body>
</html>
<script>
var obox=document.getElementById('box');
var ologin=document.getElementById('login');
var oclose=document.getElementById('close');
obox.onclick=function(){
ologin.style.display='block';
}
oclose.onclick=function(){
ologin.style.display='none';
}
</script>
</html>（即使简单也不可饿大意，以上便是diaplay方法控制盒子显示状态）。
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
