初探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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JavaScript设计模式初探
Jan 07 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
详解如何在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
PHP中的CMS的涵义
2007/03/11 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
新浪的图片新闻效果
2007/01/13 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python-openCV开运算实例
2020/07/05 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
零件设计自荐信范文
2013/11/27 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
工程质量承诺书范文
2014/03/27 职场文书
工厂搬迁方案
2014/05/11 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle