初探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的变量作用域深入理解
Oct 25 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
Vue.js表单控件实践
Oct 27 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
杏林同学录(一)
2006/10/09 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
newxtree.js代码
2007/03/13 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
用Python编写web API的教程
2015/04/30 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
pandas按条件筛选数据的实现
2021/02/20 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
安全资料员岗位职责
2013/12/14 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
中考冲刺决心书
2014/03/11 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014年团总支工作总结
2014/11/21 职场文书
个人更名证明
2015/06/23 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python