初探js和简单隐藏效果的实例

来源：图奈娱乐

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和简单隐藏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。