Example of simple hidden effect in js-JS Tutorial-php.cn

Example of simple hidden effect in js

小云云

Release： 2017-12-18 13:11:36

Original

1369 people have browsed it

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>

Copy after login

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';
    }

Copy after login

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>

Copy after login

(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!