Der Standardstil der Auswahl ist oft hässlich. Um den einheitlichen Stil der Seite zu gewährleisten, muss die Auswahl verschönert werden. Obwohl es viele verschönere Plug-Ins gibt, die viel suchen, ist es wirklich Kopfschmerzen, lange CSS-Dateien und JS-Dateien einzuführen. Tatsächlich ist das Implementierungsprinzip von Select sehr einfach. Es ist ein Prozess des Klickens, um die Anzeige, Ausblenden und Übergeben von Werten zu wechseln. Ich habe es mit JQuery simuliert und den gewünschten Stil geschrieben, ohne die Nummer einzuschränken.
Einfache Effekte:
HTML:
<div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </div> <div> <font>›</font> <span>Option 1</span> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3 </li> </ul> </div>
CSS:
ul {margin: 0; Polsterung: 0; Listenstil: Keine;}. select_box {width: 200px; Höhe: 36px; Grenze: 1PX Solid #3cf; Position: Relativ; float: links; Margin-Right: 50px;}. SELECT_BOX span {display: inline-block; Breite: 200px; Höhe: 36px; Curvesor: Zeiger; textindent: 10px;}. select_box .span_aa {color:#c36;}. select_box ul {width: 200px; Position: absolut; Oben: 36px; links: -1px; Grenze: 1PX Solid #3cf; Anzeige: Keine; Hintergrund: #fff;}. select_box li {cursor: pointer; Zeilenhöhe: 36px; textindent: 10px;}. select_box li: hover {Hintergrund:#39f; Farbe: #fff;}. SELECT_BOX FONT {Position: Absolute; Rechts: 10px; Schriftgröße: 26px; Schriftfamilie: "Microsoft Yahei"; Farbe:#3cf; Transformation: Drehen (90 Grad);}JS:
$ (function () {var s_title = $ (". select_box span"); var s_select = $ (". select_box li"); s_select.click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ('ul'). prev ("span"); $ (document) .click (function () {s_title.removeclass ("span_aa"); $ (". SELECT_BOX UL").Quellcode herunterladen: JS Wählen Sie Dropdown-Box-Verschönerung Download
Wenn Sie weiterhin ausführlich lernen möchten, können Sie auf die Zusammenfassung des Jquery-Dropdown-Felds und die Zusammenfassung der Drop-Drop-Box-Auswirkungen von JavaScript klicken, um zu lernen.
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.