js簡單隱藏效果的實例

js在頁面中使用者操作頁面時發生的效果都是Js功勞。操作有點擊，移入，和移出等，本文就為大家分享一篇初探js和簡單隱藏效果的實例，具有很好的參考價值，希望對大家有所幫助。一起跟著小編過來看看吧，希望能幫助大家。

範例1：透過display隱藏盒子

nbsp;html>

 
  <meta>
  <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>
 
 
  <p>
   </p><p>设置</p>
    

     
• 搜索设置
     
• 高级设置
     
• 关闭预测
     
• 搜索历史
    

         <script> document.getElementById(&#39;p1&#39;).onmouseover=function(){ document.getElementById(&#39;oul&#39;).style.display=&#39;block&#39;; } document.getElementById(&#39;p1&#39;).onmouseout=function(){ document.getElementById(&#39;oul&#39;).style.display=&#39;none&#39;; } </script>

當透過變數名稱var可以繼續實現：

var op1=document.getElementById('p1');
    var oul=document.getElementById('oul');
    op1.onmouseover=function(){
      oul.style.display='block';
    }
    op1.onmouseout=function(){
      oul.style.display='none';
    }

也可以透過透明的opacity,和高度來控制隱藏和顯示。

製作百度登入效果，點選登錄，彈出登入窗口，及登出

　　

nbsp;html>

  
    <meta>
    <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>
  
  
    <p>登录</p>
    <p>
      </p><p>退出</p>
    
  
  
  <script>
    var obox=document.getElementById(&#39;box&#39;);
    var ologin=document.getElementById(&#39;login&#39;);
    var oclose=document.getElementById(&#39;close&#39;);
    obox.onclick=function(){
      ologin.style.display=&#39;block&#39;;
    }
    oclose.onclick=function(){
      ologin.style.display=&#39;none&#39;;
    }
  </script>

以上是js簡單隱藏效果的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！