HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Code kopieren
Der 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">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Registerkarte „Liste“</title>
<style type="text/css">
Körper{
Rand: 0px;
Polsterung: 0px;
}
#hauptsächlich{
Breite: 310px;
Rand: 1px durchgezogen #C8C8CC;
Rand links: automatisch;
Rand rechts: automatisch;
Rand oben: 50px;
}
.Haupttitel{
Breite: 310px;
Rahmen unten: 1px durchgezogen #C8C8CC;
Höhe: 30px;
}
#main div .chang{
Rand: 1px durchgezogen #C8C8CC;
schweben: links;
Breite: 153px;
Höhe: 26px;
Textausrichtung: zentriert;
Polsterung oben: 4px;
Cursor:Zeiger;
}
.Hauptkopf{
Breite: 310px;
Höhe: 25px;
Hintergrundfarbe: #FFF4F8;
}
.main_head Schriftart{
Schriftgröße: 13px;
Farbe: #808080;
Rand oben: 5px;
}
.Hauptinhalt{
Breite: 310px;
Rahmen oben: 1px durchgezogen #808080;
}
.Hauptinhalt ul{
Rand links: -30px;
Rand oben: 5px;
Breite: 290px;
}
.main_content ul li{
Listenstiltyp: keiner;
Schriftgröße: 13px;
Farbe: #2464B2;
border-bottom:1px gepunktet #808080;
Zeilenhöhe: 27px;
}
.main_content ul li a{
Schriftgröße: 13px;
Farbe: #2464B2;
Textdekoration: keine;
}
.main_content ul li a:hover{
Textdekoration: Unterstreichen;
}
#main div ul.main_content_chang{
Breite: 290px;
Position: relativ;
z-Index: 100;
oben: 0px;
links: 0px;
Anzeige:Block;
}
#main div ul {
Position: relativ;
Anzeige: keine;
}
</Stil>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<Skripttyp="text/javascript">
$(Funktion(){
$(".chang").jeweils(Funktion(Index){
$(diese).klick(Funktion(){
$(this).css("Hintergrundfarbe","#E02D29");
$(this).siblings("div").css("Hintergrundfarbe","#fff");
$("#main div ul").removeClass("main_content_chang");
$(".main_content ul:eq("+index+")").anzeigen().geschwister("ul").ausblenden();
})
})
})
</Skript>
</Kopf>
<Text>
<div id="Haupt">
<div Klasse="Haupttitel">
<div class="chang" style="background:#E02D29">Hotspots in Echtzeit</div>
<div class="chang" style="float:right;">Siebentägige Aufmerksamkeit</div>
</div>
<div Klasse="Hauptinhalt">
<!-----------Hotspots in Echtzeit-------------->
<ul Klasse="Hauptinhalt ändern">
<li><img src="img/1_1.jpg"/> <a href="#">Ihr vom Star</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Personalisiert</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Allmächtiger Star Wars</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Jiaduobao wird Dutzende Millionen zahlen</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Mädchentoilette nach der Geburt</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">Die ganze Geschichte der tödlichen YTO-Express-Lieferung</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">Kopie von Cecilia Cheung</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Li Yanpeng lügt</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">170 Millionen Yuan Sparbuch</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">Ein Mädchen aus den 90ern ertränkte ihre eigene Tochter, um ihrem Freund zu gefallen</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">Vollständige Liste anzeigen</a></li>
</ul>
<!-----------Siebentägige Aufmerksamkeit-------------------->
<ul>
<li><img src="img/1_1.jpg"/> <a href="#">Mysteriöses Schwert in Nanjing ausgegraben</a></li>
<li><img src="img/1_2.jpg"/> <a href="#">Gefälschte Heiratsurkunde vom Büro für Zivilangelegenheiten</a></li>
<li><img src="img/3_1.jpg"/> <a href="#">Walmart entschuldigt sich</a></li>
<li><img src="img/1_4.jpg"/> <a href="#">Mädchen kauft Haarnadeln</a></li>
<li><img src="img/1_5.jpg"/> <a href="#">Falscher Moutai erschwindelt Kredite in Höhe von 200 Millionen Yuan</a></li>
<li><img src="img/1_6.jpg"/> <a href="#">Mann erhält Weihnachtsgeschenk von verstorbener Frau</a></li>
<li><img src="img/1_7.jpg"/> <a href="#">Die 100 schönsten Frauen der Welt</a></li>
<li><img src="img/1_8.jpg"/> <a href="#">Meteorit 80 Millionen</a></li>
<li><img src="img/1_9.jpg"/> <a href="#">Abe besucht den Yasukuni-Schrein</a></li>
<li><img src="img/1_10.jpg"/> <a href="#">Bühne der Frühlingsfest-Gala freigelegt</a></li>
<li style="text-align:right; border-bottom-style:none"><a href="#" style="font-size:15px">Vollständige Liste anzeigen</a></li>
</ul>
</div>
</div>
</body>
</html>

Ergebnisse:

<<:  Analyse und Erklärung der Unterschiede zwischen DIV-, Tabellen- und XHTML-Website-Erstellung

>>:  WeChat Mini-Programme werden global über die Uni-App geteilt

Artikel empfehlen

Einführung in /etc/my.cnf-Parameter in MySQL 5.7

Nachfolgend finden Sie einige allgemeine Paramete...

Implementierungsbeispiel für die Docker-Bereitstellung von Front-End- und Back-End-Trennprojekten

Inhaltsverzeichnis 1. Umweltvorbereitung 2. Ausfü...

So exportieren Sie eine CSV-Datei mit Header in MySQL

Siehe das offizielle Dokument http://dev.mysql.co...

Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays

Inhaltsverzeichnis 1. Deduplizierung einrichten 2...

So verwenden Sie CSS, um eine Box horizontal und vertikal zu zentrieren (8 Methoden)

Originalcode: center.html : <!DOCTYPE html>...

Docker-Konfiguration Alibaba Cloud Image Acceleration Pull-Implementierung

Heute habe ich Docker verwendet, um das Image abz...

So implementieren Sie den Selbststart eines Docker-Containers

Container-Autostart Docker bietet einen Neustartr...

Centos7-Installation des FFmpeg-Audio-/Video-Tools – einfaches Dokument

ffmpeg ist ein sehr leistungsfähiges Tool zur Aud...

So generieren Sie Zufallszahlen mit angegebenen Ziffern in MySQL und so generieren Sie Zufallszahlen in Stapeln

1. Stellen Sie zunächst einige häufig verwendete ...

Zusammenfassung der Unterschiede zwischen den MySQL-Speicher-Engines MyISAM und InnoDB

1. Änderungen in der Standard-Speicher-Engine von...

So gestalten Sie die Homepage von Tudou.com

<br />Ich arbeite seit mehreren Jahren im Fr...

MySQL-Optimierung: Cache-Optimierung (Fortsetzung)

In MySQL gibt es überall Caches. Wenn ich den Que...

36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)

Vorwort Diese Prinzipien sind aus tatsächlichen K...

So nutzen Sie die Multi-Core-CPU in node.js voll aus

Inhaltsverzeichnis Überblick So nutzen Sie die Mu...

Installation von Docker CE auf Ubuntu

Dieser Artikel dient zur Aufzeichnung der Install...