cari

Rumah  >  Artikel  >  hujung hadapan web  >  如何利用JavaScript来实现导航栏的示例代码分享

如何利用JavaScript来实现导航栏的示例代码分享

黄舟
黄舟asal
2017-07-25 09:22:182157semak imbas


使用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等等。函数的调用方式：事件调用，匿名调用，直接调用.

Atas ialah kandungan terperinci 如何利用JavaScript来实现导航栏的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于JavaScript如何实现导航栏吸顶操作的实例分享Artikel seterusnya：JavaScript+css如何实现酷炫的导航栏？

Artikel berkaitan

Lihat lagi