初探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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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
php MySQL与分页效率
2008/06/04 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP 第一节 php简介
2012/04/28 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
Python装饰器用法实例总结
2018/02/07 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
opencv实现图像平移效果
2021/03/24 Python
2014年技术部工作总结
2014/12/12 职场文书
自我检讨书范文
2015/01/28 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android