Heim > Artikel > Web-Frontend > JS implementiert wunderschöne Code_Javascript-Fähigkeiten für den Schiebetüreffekt

JS implementiert wunderschöne Code_Javascript-Fähigkeiten für den Schiebetüreffekt

WBOYOriginal: 2016-05-16 15:38:181249Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man mit JS einen schönen hellblauen Schiebetüreffekt erzielt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dieser wunderschöne hellblaue Schiebetürcode fühlt sich sehr gut an.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<!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>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Klassischer Schiebetüreffekt implementiert mit jQuery_jqueryNächster Artikel：Klassischer Schiebetüreffekt implementiert mit jQuery_jquery

In Verbindung stehende Artikel

Mehr sehen