本文实例讲述了JS实现漂亮的淡蓝色滑动门效果。分享给大家供大家参考。具体如下:

这款漂亮淡蓝色滑动门代码,感觉很不错哦。

运行效果截图如下:

JS实现漂亮的淡蓝色滑动门效果代码

在线演示地址如下:

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>漂亮淡蓝色滑动门代码</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= "www.jb51.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程序设计有所帮助。

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。