집 > 기사 > 웹 프론트엔드 > js 단순 숨겨진 효과의 예

js 단순 숨겨진 효과의 예

小云云원래의: 2017-12-18 13:11:361368검색

사용자가 페이지를 조작할 때 발생하는 효과는 모두 Js에 의한 것입니다. 작업에는 클릭, 이동, 이동 등이 포함됩니다. 이 기사에서는 js의 초기 탐색과 간단한 숨겨진 효과의 예를 공유할 것이며 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

예제 1: 표시를 통해 상자 숨기기

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

변수 이름 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';
    }

투명 불투명도 및 높이를 통해 숨기기 및 표시를 제어할 수도 있습니다.

바이두 로그인 효과를 만들고 로그인을 클릭하면 로그인창이 뜨고 종료됩니다

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

(간단해도 방심하지 마세요. 위 내용은 박스 표시 상태를 조절하는 디스플레이 방식입니다 ).

js 단순 숨겨진 효과의 예

관련 기사