初探js和简单隐藏效果的实例

第初探js和简单隐藏效果的实例js:在页面中用户操作页面时发生的效果都是Js功劳。操作有点击，移入，和移出等。。。

例1：通过display隐藏盒子

!DOCTYPEhtml

html

head

metacharset="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:1pxsolidblack;

margin-top:10px;

border:1pxsolidblack;

display:none;

height:60px;

li:hover{

background-color:blue;

color:white;

/style

/head

html

divid="div1"

divid="div2"设置/div

ulid="oul"

li搜索设置/li

li高级设置/li

li关闭预测/li

li搜索历史/li

/ul

/div

/html

script

document.getElementById('div1').unction(){

document.getElementById('oul').style.display='block';

document.getElementById('div1').onmouseout=function(){

document.getElementById('oul').style.display='none';

/script

/html

当通过变量名var可以继续实现：

varodiv1=document.getElementById('div1');

varoul=document.getElementById('oul');

odiv1.unction(){

oul.style.display='block';

odiv1.onmouseout=function(){

oul.style.display='none';

}

也可以通过透明的opacity,和高度来控制隐藏和显示。

制作百度登录效果，点击登录，弹出登录窗口，及退出

!DOCTYPEhtml

html

head

metacharset="utf-8"/

title/title

style

body{

border:1pxsolidwhite

#login{

width:300px;

height:300px;

background-color:yellow;

margin:0pxauto;

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

divid="box"登录/div

divid="login"

divid="close"退出/div

/div

/body

/html

script

varobox=document.getElementById('box');

varologin=document.getElementById('login');

varoclose=document.getElementById('close');

obox.unction(){

ologin.style.display='block';

oclose.unction(){

ologin.style.display='none';

/script