Heim >Web-Frontend >CSS-Tutorial >Gefälschte Qiji-Homepage-Navigationsleiste DIV+CSS+JS [Codebeispiel]_Erfahrungsaustausch

Gefälschte Qiji-Homepage-Navigationsleiste DIV+CSS+JS [Codebeispiel]_Erfahrungsaustausch

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 12:07:562323Durchsuche

Autor Zi Shu
Ein Effekt der Keqiji-Homepage, also habe ich es am Abend umgeschrieben.
Sie können sich das Keqiji ansehen Der Effekt: http://shanghai.kijiji.cn
Ich habe versucht, die Methode „position:absolute“ nicht zu verwenden Ich weiß wirklich nicht, wie es damals geschrieben wurde.
Das Folgende ist die Darstellung:

Das Folgende ist der Layoutteil

Code kopieren Der Code lautet wie folgt:

Beliebte Ereignisse

Neueste Funktionen< /a>

Service Commitment

Die neueste Erfolgsgeschichte

Zi Shu00001< /a>

zishu00002< ;/div>

zishu00003

zishu00004

;div id="info5">Zi Mo 00005

div>

Das Folgende ist der CSS-Teil: CSS ist immer noch nicht optimiert;

Code kopieren

Der Code lautet wie folgt:

以下为JS部分：由于javascript对于我来说太难了；所以可能这部分写的比较烂，但效果是出来了；

复制代码代码如下:

 
 var k = Math.floor(Math.random()*5+1);  
 for(i=1; i <6; i++){ 
  if( i==k){ 
   document.getElementById("info"+i).className="sw"; 
   document.getElementById("tag"+i).className="ha"; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; 
  } 
  else{ 
   document.getElementById("info"+i).className="hd"; 
  } 
 } 
function kijijitag(tag){  
 for(i=1; i <6; i++) 
 { 
  if (i==tag) 
 {  
   document.getElementById("info"+i).className="sw"; 
   document.getElementById("tag"+i).className="ha"; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className="hb"; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className="hc"; 
  } 
  else{ 
   document.getElementById("info"+i).className="hd"; 
   document.getElementById("tag"+i).className=""; 
   document.getElementById("tag"+i).getElementsByTagName("h4")[0].className=""; 
   document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; 
  }  
 } 
} 
 

Im Folgenden sind die vier verwendeten Bilder aufgeführt:

Sehen Sie sich den Effekt an!

<div id="info">
  <div id="kjj_tag"> </div>
  <ul>
    <li id="tag1"><h4><a href="javascript:kijijitag('1');">Beliebte Aktivitäten</a></h4></li>
    <li id="tag2"><h4><a href="javascript:kijijitag('2');">Neueste Funktionen</a></h4></li>
    <li id="tag3"><h4><a href="javascript:kijijitag('3');">Serviceverpflichtung</a></h4></li>
    <li id="tag4"><h4><a href="javascript:kijijitag('4');">Neueste Erfolgsgeschichte</a></h4></li>
    <li id="tag5"><h4><a href="javascript:kijijitag('5');">Heiße Beitragsempfehlung</a></h4></li>
  </ul>
  <div id="info1">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00001</a><a href="http://shanghai.kijiji.cn" target="blank">Gäste versammeln sich in Shanghai</a>
</div>
  <div id="info2">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00002</a><a href="http://beijing.kijiji.cn" target="blank">Wir treffen uns in Peking</a>
</div>
  <div id="info3">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00003</a><a href="http://huhehaote.kijiji.cn" target="blank">Alle Gäste versammelten sich in Hohhot</a>
</div>
  <div id="info4">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00004</a><a href="http://hangzhou.kijiji.cn" target="blank">Alle Gäste versammelten sich in Hangzhou</a>
</div>
  <div id="info5">
<a href="http://www.zishu.cn" target="blank">Zi Mo 00005</a><a href="http://www.kijiji.cn/index.html" target="blank">Keqi-Homepage</a>
</div>
</div>

</a>Zi Shu 25.04.2007

[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen

]
Besondere Anweisungen:

Der CSS-Teil ist nicht ganz klar, weil mir beim Schreiben etwas schwindlig war.
3 Teil ist immer noch Es kann rationalisiert werden, muss aber von CSS unterstützt werden

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：Empfohlenes CSS zum Erstellen klassischer mausgesteuerter AnzeigeoptionenNächster Artikel：Empfohlenes CSS zum Erstellen klassischer mausgesteuerter Anzeigeoptionen

In Verbindung stehende Artikel

Mehr sehen

Gefälschte Qiji-Homepage-Navigationsleiste DIV+CSS+JS [Codebeispiel]_Erfahrungsaustausch

Neueste Funktionen< /a>

Service Commitment

Die neueste Erfolgsgeschichte

In Verbindung stehende Artikel