js:在頁面中用戶操作頁面時發生的效果都是Js功勞。操作有點擊，移入，和移出等。。。 例1：通過display隱藏盒子 當通過變數名var可以 繼續實現： 也可以通過透明的opacity,和高度來控制隱藏和顯示。 製作百度登錄效果，點擊登錄，彈出登錄視窗，及退出 （即使簡單也不可餓大意，以上便是di ...
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方法控制盒子顯示狀態）。
