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和简单隐藏效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。