1. วิธี 1
1. ใช้รูปภาพ
2. โครงสร้างและสไตล์
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> <style> ul {padding-left: 0; ล้น: ซ่อน; } ul li {float: ซ้าย; รายการสไตล์: ไม่มี; ความกว้าง: 27px; ความสูง: 27px; ความเป็นมา: URL (img/star.gif)} ul li a {display: block; ความกว้าง: 100%; Padding-Top: 27px; ล้น: ซ่อน; } ul li.light {ตำแหน่งพื้นหลัง: 0 -29px; } </style> </head> <body> <ul> <li> <a href = "JavaScript:;"> 1 </a> </li> <li> <a href = "JavaScript:;"> 2 </a> </li> <li> href = "javascript:;"> 4 </a> </li> <li> <a href = "JavaScript:;"> 5 </a> </li></ul> </body> </html>หากมีการเพิ่มระดับแสงมันจะกลายเป็นดาวที่สดใสซึ่งหมายถึงการเปลี่ยนตำแหน่งพื้นหลังและเปลี่ยนดาวกลวงให้เป็นของแข็ง ดังนั้นเมื่อมีการใช้งาน JS มันคือการเพิ่มชื่อคลาสแสงให้กับ LI
ผล:
3. ปฏิสัมพันธ์ JS
<script> var num = finalNum = tempnum = 0; var lis = document.getElementByTagname ("li"); // num: จำนวนดาวดวงที่ผ่านมาใน // finalnum: จำนวนดาวดวงสุดท้ายที่มีแสงสว่าง // tempnum: ฟังก์ชันค่ากลาง tempnum; // ถ้าจำนวนที่ผ่านคือ 0, finalnum ใช้ค่าของ tempnum สำหรับ (var i = 0; i <lis.length; i ++) {lis [i] .classname = i <finalnum? "แสง": ""; // การส่องแสงดาวเป็นรูปแบบของการเพิ่มคลาสให้กับแสง}} สำหรับ (var i = 1; i <= lis.length; i ++) {lis [i - 1] .index = i; lis [i - 1] .onmouseover = function () {// เมาส์ผ่านและส่องแสงดาว fnshow (this.index); // ค่าที่ส่งผ่านเป็นค่าบวกนั่นคือ finalnum} lis [i - 1] .onmouseout = function () {// ดวงดาวมืดลงเมื่อเมาส์ออกจาก fnshow (0); // ค่าที่ส่งผ่านคือ 0 OnMouseOut จะถูกเรียกและค่า tempnum จะถูกเปลี่ยนเป็นจุดไฟ Tempnum ของดวงดาว = this.index; }} </script>จุดสำคัญของการออกแบบนี้คือเมื่อ mouout ค่าจะถูกบันทึกไว้เพื่อทำให้ดวงดาวมืด เริ่มต้นคือ 0 (0 ดาวที่สว่างขึ้นซึ่งหมายความว่ามันมืดสนิท) หากคุณไม่คลิกตราบใดที่เมาส์ออกไปดวงดาวทุกดวงจะมืด เหตุการณ์คลิกจะทริกเกอร์ Mouseover และ Mouseout ดังนั้นเมื่อคลิกให้เปลี่ยน tempnum เพื่อกำหนดจำนวนดาวที่จะสว่างเมื่อเมาส์ออกไป ค่านี้จะได้รับการเก็บรักษาไว้จนกว่าจะถึงครั้งต่อไปที่คุณคลิก
ผลสุดท้าย:
2. วิธี 2
1. ใช้รูปภาพ
2. เอฟเฟกต์มีดังนี้
3. รหัสที่สมบูรณ์มีดังนี้
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> การสาธิตของ Starof </title> <style> ul {padding: 0; margin: 0;} li {list-style: ไม่มี; .Scoremark .Score {ลอย: ขวา; แสดง: บล็อก; มาร์จิ้น: 0 0 0 10px; ขนาดตัวอักษร: 18px; ความสูงของสาย: 22px; Font-Weight: ตัวหนา; สี: #f70; } .Scoremark .star {float: ขวา; แสดง: บล็อก; ตำแหน่ง: ญาติ; ความกว้าง: 116px; ความสูง: 20px; ความเป็นมา: URL (img/star.png) ไม่มีการทำซ้ำ 0px -20px; } .Scoremark .ystar {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ความกว้าง: 116px; ความสูง: 20px; ความเป็นมา: URL (img/star.png) ไม่มีการทำซ้ำ 0px 0px; } .Scoremark .star ul {width: 120px; ความสูง: 20px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; } .Scoremark .star ul: hover {พื้นหลัง: url (img/star.png) ไม่ซ้ำ 0px -20px; } .Scoremark .star li {float: ซ้าย; ความกว้าง: 24px; ความสูง: 20px; } .Scoremark .star li a {display: block; ความกว้าง: 24px; ความสูง: 20px; ล้น: ซ่อน; Text -Indent: -9999px; ตำแหน่ง: สัมบูรณ์; z-index: 5; } .Scoremark .star li a: hover {พื้นหลัง: url (img/star.png) ไม่ซ้ำ 0px 0px; z-index: 3; ซ้าย: 0} .Scoremark .Star A.One-Star {ซ้าย: 0; } .Scoremark .Star A.One-Star: โฮเวอร์ {width: 24px} .Scoremark .star A.Two-Stars {ซ้าย: 24px; } .Scoremark .Star A.TWO-Stars: HOVER {WIDTH: 48PX} .SCOREMARK .STAR A.THREE-Stars {ซ้าย: 48PX; } .Scoremark .Star A.three-Stars: โฮเวอร์ {width: 72px} .Scoremark .star A.four-Stars {ซ้าย: 72px; } .Scoremark .Star A.Four-Stars: โฮเวอร์ {width: 96px} .Scoremark .STAR A.Five-Stars {ซ้าย: 96px; } .Scoremark .Star A.Five-Stars: โฮเวอร์ {width: 120px; } .Scoremark .Tips {ตำแหน่ง: สัมบูรณ์; ด้านบน: -28px; ซ้าย: 0; ความกว้าง: 40px; ความสูง: 21px; สี: #333; ความสูงของสาย: 20px; Padding: 0 0 5px 0; TEXT-ALIGN: CENTER; ความเป็นมา: URL (img/ico.png) ไม่มีการทำซ้ำ; z-index: 6; ขนาดตัวอักษร: 12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js" integrity = "sha256-bbhdlvqf/xty9gja0dq3hiwqf8lacrtxxzkrutelt4444444444444444444444444444444444 <div id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "JavaScript: void (0)" data-name = "แย่มาก"> 1 </a> </li> <li> href = "JavaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "JavaScript: void (0)" data-name = "ดีกว่า"> 4 </a> </li> <li> href = "JavaScript: void (0)" data-name = "ดีมาก"> 5 </a> </li> </ul> </span> <div style = "left: 0px; display: none;"> </div> </div> a "). mouseEnter (function () {var txt = $ (this) .attr (" data-name "); var x = $ (นี่) .parent (" li "). index (); star.find (". เคล็ดลับ "). html (txt) .css (" ซ้าย ",-6+x 24) star.find (". star ul li a"). mouseleave (function () {star.find (". เคล็ดลับ"). html (""). css ("ซ้าย", 0) .hide ();}); } </script> </body> </html>4. หลักการ
4.1html โครงสร้าง
<div id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "JavaScript: void (0)" data-name = "แย่มาก"> 1 </a> </li> <li> href = "JavaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "JavaScript: void (0)" data-name = "ดีกว่า"> 4 </a> </li> <li> href = "JavaScript: void (0)" data-name = "ดีมาก"> 5 </a> </li> </ul> </pan> <div style = "left: 0px; display: none;"> </div> </div>
คำอธิบายสั้น ๆ ของหลักการ: ส่วนใหญ่ความสัมพันธ์ครอบคลุมของพื้นหลังหลายชั้น
ก่อนอื่นโครงสร้าง: มีสองชั้นด้านล่าง หนึ่งคือ ystar และอีกอันคือ ul
4.1. บรรลุผลการจัดอันดับของ 4 ดาว
เลเยอร์ด้านนอกสตาร์ได้รับความกว้างและภาพพื้นหลังเป็นดาวสีเทากลวง
ภายใน, .ystar แสดงถึงดาวที่มีแสงสว่างและพื้นหลังของมันคือดาวสีเหลืองแข็ง หากมีดาวสว่าง 4 ดวงให้ตั้งค่าความกว้างของ .ystar เป็น 80% 2 เม็ดคือ 40%
4.2. ตระหนักถึงผลกระทบของการส่องแสงดาวบนเมาส์โฮเวอร์
ส่วนใหญ่ควบคุมผ่าน CSS กุญแจสำคัญคือผ่าน: โฮเวอร์
เมื่อ UL: โฮเวอร์ภาพพื้นหลังของดาวสีเทากลวงจะถูกเพิ่มเข้ามา
เมื่อ A: โฮเวอร์ความกว้างจะกลายเป็นความกว้างของดาวสองสามดวงแรก
ด้วยวิธีนี้เมื่อโฮเวอร์มีพื้นหลัง 4 ชั้น ตัวอย่างเช่นเมื่อวางตัวดาวดวงที่สองจากล่างขึ้นไปด้านบน
. สตาร์ดาร์กสตาร์ความกว้าง 100% ดาวฤกษ์สว่าง 80 ความกว้าง UL Dark Star ความกว้าง 100% ความกว้าง 40%
4.3. เคล็ดลับการแสดงผลของเมาส์โฮเวอร์
รับการใช้งานชื่อข้อมูลของ A ถึง JS
ด้านบนเป็นเนื้อหาโดยละเอียดของรหัสตัวอย่าง (สองวิธี) สำหรับการใช้ฟังก์ชั่นการจัดอันดับดาวของ JS ที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!