初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例

第初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例js:在頁(yè)面中用戶操作頁(yè)面時(shí)發(fā)生的效果都是Js功勞。操作有點(diǎn)擊，移入，和移出等。。。

例1：通過(guò)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"設(shè)置/div

ulid="oul"

li搜索設(shè)置/li

li高級(jí)設(shè)置/li

li關(guān)閉預(yù)測(cè)/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

當(dāng)通過(guò)變量名var可以繼續(xù)實(shí)現(xiàn)：

varodiv1=document.getElementById('div1');

varoul=document.getElementById('oul');

odiv1.unction(){

oul.style.display='block';

odiv1.onmouseout=function(){

oul.style.display='none';

}

也可以通過(guò)透明的opacity,和高度來(lái)控制隱藏和顯示。

制作百度登錄效果，點(diǎn)擊登錄，彈出登錄窗口，及退出

!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