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

时间：2021-05-25

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章