如何利用JavaScript來實現導覽列的範例程式碼分享
- 黄舟原創
- 2017-07-25 09:22:182107瀏覽
使用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