JS實現(xiàn)漂亮的淡藍(lán)色滑動門效果代碼

更新時間：2015年09月23日 16:43:08 作者：企鵝

這篇文章主要介紹了JS實現(xiàn)漂亮的淡藍(lán)色滑動門效果代碼,涉及JavaScript通過自定義函數(shù)遍歷頁面元素及動態(tài)設(shè)置元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)漂亮的淡藍(lán)色滑動門效果。分享給大家供大家參考。具體如下：

這款漂亮淡藍(lán)色滑動門代碼，感覺很不錯哦。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>漂亮淡藍(lán)色滑動門代碼</title>
 <style type="text/css">
  body
  {
   font-size:12px;
  }
  .normal
  {
    list-style: none; float: left;
    padding: 5px 2px 2px 2px;
    width: 90px; text-align :center ; 
    vertical-align :middle ; 
    cursor :pointer ; 
    border-bottom :solid 1px #9cd9f5; 
    border-right :solid 1px #9cd9f5;
    background-color: #dee7f5; 
    border-collapse :separate ;
  }
  .selected
  {
    list-style: none; 
    float: left; 
    padding: 5px 2px 2px 2px;
    width: 90px; 
    text-align :center ; 
    vertical-align :middle ; 
    cursor :pointer ;
    border-bottom :solid 0px #9cd9f5; 
    border-right :solid 1px #9cd9f5;
    background-color:#f8f8f8 ;
  }
  #divMainTab
  {
    border-left :solid 1px #9cd9f5; 
    border-top :solid 1px #9cd9f5;
    float:left;
    margin: 0px; padding: 0px
  }
  .divContent
  {
    width: 474px;
    height: 400px; 
    clear: both; 
    border-bottom: solid 1px #9cd9f5;
    border-left: solid 1px #9cd9f5; 
    border-right: solid 1px #9cd9f5;
  }
  a{
   text-decoration: none;
   color: #00ccff;
  }
  a:hover
  {
   text-decoration: underline;
   color: #cc0000;
  }
 </style>
 <script language="javascript" type="text/javascript">
  function changeTab(index)
  {
   for (var i=1;i<=5;i++)
   {
    document.getElementById ("li_"+i).className ="normal";
    document.getElementById ("li_"+index).className ="selected";
    document.getElementById ("div"+i).style.display ="none";
   }
   document.getElementById ("div1").innerText= "m.fzitv.net"+index;
   document.getElementById ("div"+index).style.display ="block";
  }
 </script>
</head>
<body>
 <form id="form1" runat="server">
  <div>
   <div id="divMainTab">
    <ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;">
     <li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">最新更新</a> </li>
     <li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">閱讀排行</a> </li>
     <li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">本月排行</a> </li>
     <li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">本日排行</a> </li>
     <li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">腳本之家</a> </li> 
    </ul>
   </div>
   <div id="div1" style ="display :block" class ="divContent">
    1號
   </div>
    <div id="div2" style ="display :none" class ="divContent">
    2號
   </div>
    <div id="div3" style ="display :none" class ="divContent">
    3號
   </div>
    <div id="div4" style ="display :none" class ="divContent">
    4號
   </div>
    <div id="div5" style ="display :none" class ="divContent"> 
    5號
   </div> 
  </div>
 </form>
</body>
</html>

希望本文所述對大家的JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: