Maison > Article > interface Web > Exemple d'effet caché simple js
Exemple d'effet caché simple js
- 小云云original
- 2017-12-18 13:11:361328parcourir
Les effets de js sur la page lorsque les utilisateurs utilisent la page sont tous dus à Js. Les opérations incluent le clic, l'entrée, la sortie, etc. Cet article partagera avec vous un exemple d'exploration initiale de js et d'effets cachés simples. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Exemple 1 : Masquer la boîte via 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>
Lors du passage du nom de la variable var, cela peut être continué :
var op1=document.getElementById('p1');
var oul=document.getElementById('oul');
op1.onmouseover=function(){
oul.style.display='block';
}
op1.onmouseout=function(){
oul.style.display='none';
}
Cela peut également être fait via l'opacité transparente et la hauteur. Contrôlez le masquage et l'affichage.
Créez un effet de connexion Baidu, cliquez sur Connexion, la fenêtre de connexion apparaîtra et quittez
<!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>
(Même si c'est simple, ne Ne soyez pas négligent, ce qui précède est la méthode d'affichage pour contrôler l'état d'affichage de la boîte).
Recommandations associées :
js masque le contenu entre les divs par nom de classe
Utilisez CSS pour masquer les divs dans les méthodes HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!