初探js和简单隐藏效果的实例
网络 2017-12-25 1199
js:在页面中用户操作页面时发生的效果都是Js功劳。操作有点击，移入，和移出等。。。
例1：通过display隐藏盒子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!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可以 继续实现：
1 2 3 4 5 6 7 8 | 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,和高度来控制隐藏和显示。
制作百度登录效果，点击登录，弹出登录窗口，及退出
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!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方法控制盒子显示状态）。
