js简单隐藏效果的实例
程序员文章站
2022-04-10 16:25:12
...
js在页面中用户操作页面时发生的效果都是Js功劳。操作有点击，移入，和移出等，本文就为大家分享一篇初探js和简单隐藏效果的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
例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方法控制盒子显示状态）。
相关推荐：
javascript 显示/隐藏，创建/删除html元素用法实例详解
以上就是js简单隐藏效果的实例的详细内容，更多请关注其它相关文章！
上一篇： 详解微信开发input输入框
下一篇： PHP怎样处理HTTPS请求