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

2019-11-19 14:52:32

字体：大中小

来源：转载

供稿：网友

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

上一篇：Vue代码分割懒加载的实现方法

下一篇：详解如何在angular2中获取节点