如何使用js制作隐藏效果
短信预约 -IT技能 免费直播动态提醒
小编给大家分享一下如何使用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制作隐藏效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
