初探js和简单隐藏效果的实例
更新时间：2017年11月23日 08:41:55 作者：搬砖小工Marvin
下面小编就为大家分享一篇初探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和简单隐藏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了canvas实现流星雨的背景效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章为大家详细主要介绍了用JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
javascript在处理图像的能力其实是不弱的，可惜浏览器大战连累了它，这还不算，Adobe 收购Macromedia更让SVG处于怠工状态。2009-10-10
本段js和html两段代码实现分页控件效果，下面通过本文给大家详细介绍下基于KO+BootStrap+MVC实现的分页控件，非常不错，感兴趣的朋友一起看看吧2016-11-11
这篇文章主要介绍了javascript面向对象之对象的深入理解,将javascript面向对象程序设计中一切都视为对象,并以实例形式进一步分析了面向对象的特性,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了Javascript 鼠标移动上去 滑块跟随效果代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了VsCode插件整理（小结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了JavaScript获取当前窗口内的宽度和高度汇总的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了javascript检测是否联网的实现代码,需要的朋友可以参考下2014-09-09
javascript使用avalon绑定实现checkbox全选
checkbox全选应该是一个比较实用的前端技巧吧，很多时候我们都需要点击一个checkbox，然后将所有的复选框自动全部选中，一些CMS系统的后台中，使用本JS效果后，会大大增强了操作体验，那么究竟是如何实现这一功能的呢？2015-05-05
最新评论