初探js和简单隐藏效果的实例
时间:2019-04-10
本文章向大家介绍初探js和简单隐藏效果的实例,主要包括初探js和简单隐藏效果的实例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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,和高度来控制隐藏和显示。
制作百度登录效果,点击登录,弹出登录窗口,及退出
<!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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法