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

Javascript 相关文章推荐
有关DOM元素与事件的3个谜题
Nov 11 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
jquery预加载图片的方法
May 27 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
小程序实现侧滑删除功能
Jun 25 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
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
在Python中使用第三方模块的教程
2015/04/27 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python多线程分块读取文件
2019/08/29 Python
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
招标授权委托书样本
2014/09/23 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
公司财务部岗位职责
2015/04/14 职场文书
婚宴父亲致辞
2015/07/27 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
ant design charts 获取后端接口数据展示
2022/05/25 Javascript