初探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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
JSON 编辑器实现代码
Dec 06 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
微信小程序实现点击效果
Jun 21 Javascript
vue $mount 和 el的区别说明
Sep 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
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
用PHP 4.2书写安全的脚本
2006/10/09 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
python从PDF中提取数据的示例
2020/10/30 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
群众路线对照检查材料
2014/09/22 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电