Home > Article > Web Front-end > Example of simple hidden effect in js
Example of simple hidden effect in js
- 小云云Original
- 2017-12-18 13:11:361327browse
The effects of js when users operate the page on the page are all due to Js. Operations include click, move in, move out, etc. This article will share with you an example of initial exploration of js and simple hiding effects. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.
Example 1: Hide the box through 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>
When passing the variable name var, you can continue to implement:
var op1=document.getElementById('p1');
var oul=document.getElementById('oul');
op1.onmouseover=function(){
oul.style.display='block';
}
op1.onmouseout=function(){
oul.style.display='none';
}
You can also control hiding and display through transparent opacity and height. .
Create Baidu login effect, click login, pop up the login window, and exit
<!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>
(Even if it is simple, don’t be careless. The above is the diaplay method control box shows status).
Related recommendations:
js hides content between divs by class name
Use CSS to hide divs in HTML Method
javascript show/hide, create/delete html element usage examples
The above is the detailed content of Example of simple hidden effect in js. For more information, please follow other related articles on the PHP Chinese website!