รูปแบบเริ่มต้นของการเลือกมักจะน่าเกลียด เพื่อให้แน่ใจว่ารูปแบบที่สม่ำเสมอของหน้าต้องเลือกให้สวยงาม แม้ว่าจะมีปลั๊กอินที่สวยงามมากมาย แต่ก็ค้นหาได้มาก แต่ก็เป็นอาการปวดหัวที่จะแนะนำไฟล์ CSS ยาวและไฟล์ JS ในความเป็นจริงหลักการการใช้งานของ Select นั้นง่ายมากมันเป็นกระบวนการของการคลิกเพื่อสลับการแสดงผลซ่อนและส่งผ่าน ฉันจำลองด้วย jQuery และเขียนสไตล์ที่คุณต้องการโดยไม่ จำกัด หมายเลข
เอฟเฟกต์ง่าย ๆ :
html:
<div> <font>+ </font> <pan> ตัวเลือก 1 </span> <ul> <li> ตัวเลือก 1 </li> <li> ตัวเลือก 1 </li> <li> ตัวเลือก 2 </li> <li> ตัวเลือก 3 </li> </ul> </div> 3 </li></ul> </div>
CSS:
ul {margin: 0; Padding: 0; รายการสไตล์: ไม่มี;}. select_box {width: 200px; ความสูง: 36px; ชายแดน: 1px Solid #3CF; ตำแหน่ง: ญาติ; ลอย: ซ้าย; มาร์จิ้น-ขวา: 50px;}. select_box span {display: inline-block; ความกว้าง: 200px; ความสูง: 36px; เส้นโค้ง: ตัวชี้; Text-Indent: 10px;}. select_box .span_aa {color:#c36;}. select_box ul {width: 200px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 36px; ซ้าย: -1px; ชายแดน: 1px Solid #3CF; แสดง: ไม่มี; พื้นหลัง: #FFF;}. select_box li {เคอร์เซอร์: ตัวชี้; ความสูงของสาย: 36px; Text-Indent: 10px;}. select_box li: โฮเวอร์ {พื้นหลัง:#39f; สี: #FFF;}. Select_Box Font {ตำแหน่ง: Absolute; ขวา: 10px; ขนาดตัวอักษร: 26px; Font-Family: "Microsoft Yahei"; สี:#3cf; แปลง: หมุน (90deg);}JS:
$ (function () {var s_title = $ (". select_box span"); var s_select = $ (". select_box li"); s_title.click (ฟังก์ชั่น (e) {$ (นี่) s_select.Click (ฟังก์ชั่น () {var s_text = $ (นี่) .html (); var s_title_2 = $ (นี่) .parent ('ul'). prev ("span"); s_title_2.html (s_text). $ (เอกสาร) .click (ฟังก์ชั่น () {s_title.removeclass ("span_aa"); $ (". select_box ul"). ซ่อน ();});});ดาวน์โหลดซอร์สโค้ด: js เลือกกล่องความงามแบบเลื่อนลง
หากคุณยังต้องการเรียนรู้ในเชิงลึกคุณสามารถคลิกที่สรุปเอฟเฟกต์แบบดรอปดาวน์ JQuery และสรุปเอฟเฟกต์แบบดรอปดาวน์ JavaScript เพื่อเรียนรู้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript