如何利用JavaScript来实现导航栏的示例代码分享
- 黄舟原创
- 2017-07-25 09:22:182188浏览
使用js实现一个简单的导航栏。利用js实现某种效果的步骤：1.实现CSS布局；2:js的实现原理；3.写CSS代码。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>
ul {
padding:0px;
margin:0px;
list-style:none;
}
a {
text-decoration:none;
background-color:#f1f1f1;
display:block;
width:50px;
text-align:center;
}
.list {
display:none;
}
ul ul{
width:140px;
border:solid #000 1px;
position:absolute;
}
ul ul li {
text-align:center;
}
.item {
position:relative;
}
</style>
</head>
<body>
<ul>
<li class="item" id="item">
<a href="#" id="link">微博</a>
<ul class="list" id="list">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul></body><script>
var link = document.getElementById("link");
var item = document.getElementById("item");
var list = document.getElementById("list");
item.onmouseover = show;
item.onmouseout = hide; function show(){
list.style.display = "block";
link.style.background = "yellow";
} function hide(){
list.style.display = "none";
}</script></html>js从视线中移除某个元素的方法：
(1)display:none;(不占用文档流)
(2)visibility:hidden;(隐藏某个元素，仍然占用文档流)
(3)透明度设置为0，即为opacity:0;(IE浏览器中，透明度可以这样设置 filter:alpha(opacity=0)；)
(4)设置margin值，例如设置margin值为负值
(5)通过overflow:hidden;和相对定位，改变left,和top值移动元素的位置
(6)通过一个白色的p，把这个覆盖在上面的p移除。
……
js中的事件:鼠标事件，键盘事件，系统事件，表单事件，自定义事件等等。常见的鼠标事件有:onmouseover,onmouseout,onmousemove,onclick,onmounseup,mounsedown等等。函数的调用方式：事件调用，匿名调用，直接调用.
以上是如何利用JavaScript来实现导航栏的示例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn