小编给大家分享一下如何使用js制作隐藏效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
例1：通过display隐藏盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
.li{
list-style:none;
}
#div1{
width:200px;
text-align:center;
font:30px/60px "simhei";
}
#div2{
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>
<div id ="div1">
<div id="div2">设置</div>
<ul id="oul">
<li>搜索设置</li>
<li>高级设置</li>
<li>关闭预测</li>
<li>搜索历史</li>
</ul>
</div>
</html>
<script>
document.getElementById('div1').onmouseover=function(){
document.getElementById('oul').style.display='block';
}
document.getElementById('div1').onmouseout=function(){
document.getElementById('oul').style.display='none';
}
</script>
</html>当通过变量名var可以 继续实现：
var odiv1=document.getElementById('div1');
var oul=document.getElementById('oul');
odiv1.onmouseover=function(){
oul.style.display='block';
}
odiv1.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>
<div id="box" class="classclose">登录</div>
<div id ="login">
<div id="close" class="classclose">退出</div>
</div>
</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>以上是“如何使用js制作隐藏效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
