初探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 相关文章推荐
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
HTML的select控件美化
Mar 27 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
深入理解Antd-Select组件的用法
Feb 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
摩卡咖啡
2021/03/03 咖啡文化
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
微信支付的开发流程详解
2016/09/13 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
详解jQuery选择器
2016/12/21 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
农村文化活动总结
2014/08/28 职场文书
小学运动会开幕词
2016/03/04 职场文书
2019银行竞聘书
2019/06/21 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫