初探js和简单隐藏效果的实例
程序员文章站
2022-03-20 21:46:34
js:在页面中用户操作页面时发生的效果都是js功劳。操作有点击，移入，和移出等。。。
例1：通过display隐藏盒子
js:在页面中用户操作页面时发生的效果都是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>
（即使简单也不可饿大意，以上便是diaplay方法控制盒子显示状态）。
以上这篇初探js和简单隐藏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。