


JS CSS implementiert imitierte Alipay-Menüauswahleffekte mit code_javascript-Fähigkeiten
Das Beispiel in diesem Artikel beschreibt den JS-CSS-Code zur Implementierung des imitierten Alipay-Menüauswahleffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein wunderschönes JS-CSS-Imitat-Alipay-Menü. Der Gesamtstil und die Form unterscheiden sich nicht vom Alipay-Menü. Wenn Sie genau hinschauen, werden Sie feststellen, dass dies von einem CSS-Enthusiasten selbst gemacht wurde CSS-Code an Der Autor möchte sich dafür bedanken, dass er uns ein so wunderbares Menü zur Verfügung gestellt hat.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-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> <title>CSS仿支付宝菜单</title> <style type="text/css"> * { padding:0px; margin:0px; list-style:none; } body { font-size:14px; font-family:Verdana; } #nav ul.nav_left, #nav ul.nav_right, #nav ul.nav_main li, #nav ul.nav_main li.over a, #nav ul.nav_main li a span, #nav ul.nav_main li.over a span { background:url(images/b.gif) no-repeat; } #nav { background:url(images/b.gif) repeat-x; } #wrap { width:960px; margin:0 auto; height:auto; overflow:hidden; padding-top:50px; } #nav { background-position: 0 -178px; height:79px; width:960px; } #nav ul.nav_left { background-position: 0 0; float:left; width:10px; height:79px; display:inline; } #nav ul.nav_right { background-position:-20px 0; float:right; width:10px; height:79px; display:inline; } #nav ul.nav_main { float:left; display:inline; } #nav ul.nav_main li { background-position: -41px 0; float:left; padding:0 5px; } #nav ul.nav_main li a { height:40px; display:block; text-decoration:none; float:left; } #nav ul.nav_main li.over a { background-position: 0 -85px; } #nav ul.nav_main li a span { background-position: right -90px; height:22px; display:block; padding-right:30px; padding-left:20px; padding-top:18px; color:#fff; font-weight:bold; overflow:hidden; cursor:pointer; float:left; margin-left:15px; display:inline; } #nav ul.nav_main li.over a span { background-position: right -130px; color:#555; } #nav ul.nav_main li#show_0 { background:none; } </style> <script type="text/javascript"> function $(id) { return document.getElementById(id); } window.onload = function() { var Root = $("nav_li").getElementsByTagName("li"); for (var i = 0; i < Root.length; i++) { c = Root[i]; c.setAttribute("id", "show_" + i); var xp = function(i) { show(i); }; c.onmouseover = dete_bibao(xp, i, c); } } function show(j) { for (var n = 0; n <= 6; n++) { if ($("show_" + n).className != "s") { $("show_" + n).className = "s"; } if (n == j) { $("show_" + n).className = "over"; } } } function dete_bibao(fn, params, obj) { return function() { fn.call(obj || window, params); } } </script> </head> <body> <div id="wrap"> <div id="nav"> <ul class="nav_left"> </ul> <ul class="nav_main" id="nav_li"> <li><a href="#"><span>首页</span></a></li> <li><a href="#"><span>脚本代码</span></a></li> <li><a href="#"><span>脚本下载</span></a></li> <li><a href="#"><span>网页特效</span></a></li> <li><a href="#"><span>生活社区</span></a></li> <li><a href="#"><span>休闲电影</span></a></li> <li><a href="#"><span>哈哼~</span></a></li> </ul> <ul class="nav_right"> </ul> </div> </div> </body> </html>
Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Mit lokal installierten Schriftdateien auf Webseiten kürzlich habe ich eine kostenlose Schriftart aus dem Internet heruntergeladen und sie erfolgreich in mein System installiert. Jetzt...

Wenn die Anzahl der Elemente nicht festgelegt ist, wählen Sie das erste untergeordnete Element des angegebenen Klassennamens über CSS aus. Bei der Verarbeitung der HTML -Struktur begegnen Sie häufig auf verschiedene Elemente ...

Die H5 -Seite muss aufgrund von Faktoren wie Code -Schwachstellen, Browserkompatibilität, Leistungsoptimierung, Sicherheitsaktualisierungen und Verbesserungen der Benutzererfahrung kontinuierlich aufrechterhalten werden. Zu den effektiven Wartungsmethoden gehören das Erstellen eines vollständigen Testsystems, die Verwendung von Versionstools für Versionskontrolle, die regelmäßige Überwachung der Seitenleistung, das Sammeln von Benutzern und die Formulierung von Wartungsplänen.

Ja, die H5-Seitenproduktion ist eine wichtige Implementierungsmethode für die Front-End-Entwicklung, die Kerntechnologien wie HTML, CSS und JavaScript umfasst. Entwickler bauen dynamische und leistungsstarke H5 -Seiten auf, indem sie diese Technologien geschickt kombinieren, z. B. die Verwendung der & lt; canvas & gt; Tag, um Grafiken zu zeichnen oder JavaScript zu verwenden, um das Interaktionsverhalten zu steuern.

Die Vorteile der H5 -Seitenproduktion umfassen: Leichte Erfahrung, schnelle Ladegeschwindigkeit und Verbesserung der Benutzerbindung. Die plattformübergreifende Kompatibilität ist nicht erforderlich, um sich an verschiedene Plattformen anzupassen und die Entwicklungseffizienz zu verbessern. Flexibilität und dynamische Updates, kein Audit erforderlich, was die Änderung und Aktualisierung von Inhalten erleichtert. Kosteneffektive, niedrigere Entwicklungskosten als native Apps.

Kompatibilitätsprobleme des Multi-Reis-Überlaufs auf mobilen Terminal auf verschiedenen Geräten bei der Entwicklung mobiler Anwendungen mit VUE 2.0 begegnen Sie häufig auf die Notwendigkeit, den Text zu überfließen ...

Eingehende Diskussion über verschachtelte Methoden zur Änderung des Div-Stils In diesem Artikel wird detailliert erklärt, wie der Div-Element-Stil von verschachtelten Strukturen effektiv geändert werden kann. Die Herausforderung, vor der wir stehen, ist, wie ...

Der Schwellenwert für die Herstellung von H5 -Seiten ist je nach Ziel weder hoch noch niedrig. Es ist einfacher, einfache statische Seiten herzustellen, Sie müssen nur das Grundwissen von HTML und CSS beherrschen. Es ist relativ hoch, Seiten mit starken interaktiven und reichhaltigen Merkmalen zu erstellen, und Sie müssen über umfassende Kenntnisse über HTML, CSS, JavaScript, Front-End-Frameworks, Leistungsoptimierung und Kompatibilität verfügen.
