初探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和简单隐藏效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Jquery实现显示和隐藏的4种简单方式
Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&
-
js菜单点击显示或隐藏效果的简单实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
JS实现“隐藏与显示”功能(多种方法)
下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过按钮实现隐藏和显示</title> <style type="text/css"> .body{ margin: 0 auto; } #show{ wid
-
javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ mar
-
初探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{ widt
-
js最简单的双向绑定实例讲解
把代码复制放到页面里面运行看一下效果就好了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="myinput" > <sc
-
js实现图片推拉门效果代码实例
初学者. 推拉门是网页中常见的一种形式,通过JS实现比较简单.主要是通过getElement找到节点元素,然后对其进行相应的赋值即可. 新建一个index.html文件,并在同一个目录中添加三个文件夹,images(用来当作"门"的图片),styles(用来存放css文件),scripts(用来存放js文件).然后在index.html中添加代码: <!doctype html> <html> <head> <meta charset=&quo
-
vue.js的简单自动求和计算实例
一.导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 二.前端页面 我用了一个表格,话不多说直接上代码 <div id="vuetest"> <table> <tr> <td>数学</td>
-
js实现简单放大镜效果
用js实现简单放大镜效果,供大家参考,具体内容如下 此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边.当鼠标移动时右边的大图片也会局部移动.这里的放大并不是真正的放大,而是等比例移动.下面是实现的代码: css样式代码如下: <style> .s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;} .s_box img{width: 400px;heig
-
js实现简单日历效果
本文实例为大家分享了js实现简单日历效果的具体代码,供大家参考,具体内容如下 ## css模块 <style type="text/css"> *{ margin: 0; padding: 0; } .date{ width: 300px; height: 220px; border: 1px solid #000; margin: 100px auto; } .title{ width: 200px; display: flex; font-size: 12px; mar
-
JS一个简单的注册页面实例
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> // $(function(){ // $("input[na
-
vue.js层叠轮播效果的实例代码
最近写公司项目有涉及到轮播banner,一般的ui框架无法满足产品需求:所以自己写了一个层叠式轮播组件:现在分享给大家: 主要技术栈是vue.js ;javascript;jquery:确定实现思路因工作繁忙,暂时不做梳理了:直接贴代码参考: 此组件是基于jquer封装,在vue项目中使用首先需要先安装jquery插件:指令:npm install jquery,安装完成之后再webpack.base.conf.js配置插件: plugins: [ new webpack.ProvidePlug
-
JS实现可视化音频效果的实例代码
效果如图: 背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整. 代码如下(可直接复制使用): <html lang="en"> <head> <meta charset="UTF-8"> <title>可视化音频</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></scr
-
JS实现的打字机效果完整实例
本文实例讲述了JS实现的打字机效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the