Home >Web Front-end >JS Tutorial >Example of simple hidden effect in js

Example of simple hidden effect in js

小云云Original: 2017-12-18 13:11:361414browse

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>

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

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>

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About Vue code splitting and lazy loadingNext article：About Vue code splitting and lazy loading

See more

Example of simple hidden effect in js

Related articles