编程 Javascript

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

Posted in Javascript onNovember 23, 2017

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,和高度来控制隐藏和显示。

制作百度登录效果，点击登录，弹出登录窗口，及退出

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

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

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

- Author -

搬砖小工Marvin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

网页常用特效代码整理

Jun 23 Javascript

Jquery Uploadify上传带进度条的简单实例

Feb 12 Javascript

浏览器窗口加载和大小改变事件示例

Feb 27 Javascript

一个实用的图片切换支持点击切换和自动轮播

Sep 09 Javascript

整理Javascript基础入门学习笔记

Nov 29 Javascript

js实现页面刷新滚动条位置不变

Nov 27 Javascript

JS实现复制内容到剪贴板功能

Feb 05 Javascript

详解vue中引入stylus及报错解决方法

Sep 22 Javascript

Angular2监听页面大小变化的解决方法

Oct 09 Javascript

vue实现todolist功能、todolist组件拆分及todolist的删除功能

Apr 11 Javascript

微信小程序开发中var that =this的用法详解

Jan 18 Javascript

Js数组扁平化实现方法代码总汇

Nov 11 Javascript

详解如何在angular2中获取节点

Nov 23 #Javascript

Vuejs中使用markdown服务器端渲染的示例

Nov 22 #Javascript

浅谈Vue-cli 命令行工具分析

Nov 22 #Javascript

JavaScript数据结构与算法之队列原理与用法实例详解

Nov 22 #Javascript

深入理解Vue官方文档梳理之全局API

Nov 22 #Javascript

初识 Vue.js 中的 *.Vue文件

Nov 22 #Javascript

chorme 浏览器记住密码后input黄色背景处理方法(两种)

Nov 22 #Javascript