1. الطريقة 1
1. استخدم الصور
2. الهيكل والأناقة
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مستند </title> <style> ul {padding-left: 0 ؛ الفائض: مخفي. } ul li {float: Left ؛ على غرار القائمة: لا شيء ؛ العرض: 27 بكسل ؛ الارتفاع: 27 بكسل ؛ الخلفية: url (img/star.gif)} ul li a {display: block ؛ العرض: 100 ٪ ؛ حشو أعلى: 27 بكسل ؛ الفائض: مخفي. } ul li.light {background -position: 0 -29px ؛ } </style> </head> <body> <ul> <li> <a href = "javaScript: ؛"> 1 </a> </li> <li> <a href = "javaScript: ؛"> 2 </a> </li> <li> <li> <a href = "javascript: ؛" href = "javaScript: ؛"> 4 </a> </li> <li> <a href = "javaScript: ؛"> 5 </a> </li> </ul> </body> </html>إذا تمت إضافة فئة الضوء ، فستصبح نجمًا مشرقًا ، مما يعني تغيير موضع الخلفية وتحويل النجم المجوف إلى نجم صلب. لذلك عندما يتم تنفيذ JS ، فإن إضافة اسم فئة الضوء إلى LI.
تأثير:
3. التفاعل ي
<script> var num = finalnum = tempnum = 0 ؛ var lis = document.getElementsByTagName ("li") ؛ tempnum ؛ // إذا تم تمرير Num Is 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) ؛ سيتم استدعاء onMouseout ، وسيتم تغيير قيمة tempnum لتضيء النجوم tempnum = this.index ؛ }} </script>النقطة الرئيسية لهذا التصميم هي أنه عندما يتم حفظ القيمة لجعل النجوم مظلمة. الأولي هو 0 (تصبح 0 نجوم أكثر إشراقًا ، مما يعني أنه مظلم تمامًا). إذا لم تنقر ، طالما أوراق الماوس ، فستكون جميع النجوم مظلمة. سيؤدي حدث Click إلى ظهور ماوس ودقة. لذلك ، عند النقر ، قم بتغيير tempnum لتحديد عدد النجوم التي ستكون مشرقة عندما يترك الماوس. سيتم الحفاظ على هذه القيمة حتى في المرة التالية التي تنقر فيها.
التأثير النهائي:
2. الطريقة 2
1. استخدم الصور
2. التأثير على النحو التالي
3. الرمز الكامل كما يلي
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> demo of starof </title> <style> ul {padding: 0 ؛ margin: 0 ؛} li {style: none ؛}/*star rating*/ .scoremark {width: 154px ؛ الموضع: النسبية ؛ الهامش-أعلى: 50px ؛} .scoremark .score {float: right ؛ العرض: كتلة ؛ الهامش: 0 0 0 10px ؛ حجم الخط: 18 بكسل ؛ رفع الخط: 22px ؛ خط الرصيف: جريئة ؛ اللون: #f70 ؛ } .scoremark .star {float: right ؛ العرض: كتلة ؛ الموقف: قريب العرض: 116 بكسل ؛ الارتفاع: 20 بكسل ؛ الخلفية: url (img/star.png) no -repeat 0px -20px ؛ . أعلى: 0 ؛ اليسار: 0 ؛ العرض: 116 بكسل ؛ الارتفاع: 20 بكسل ؛ الخلفية: url (img/star.png) no-repeat 0px 0px ؛ } .scoremark .star ul {width: 120px ؛ الارتفاع: 20 بكسل ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ } .scoremark .star ul: hover {background: url (img/star.png) no -repeat 0px -20px ؛ } .scoremark .star li {float: left ؛ العرض: 24 بكسل ؛ الارتفاع: 20 بكسل ؛ } .scoremark .star li a {display: block ؛ العرض: 24 بكسل ؛ الارتفاع: 20 بكسل ؛ الفائض: مخفي. استقلال النص: -9999px ؛ الموقف: مطلق ؛ Z-index: 5 ؛ } .scoremark .star li a: hover {background: url (img/star.png) no-repeat 0px 0px ؛ Z-index: 3 ؛ اليسار: 0} .scoremark .star A.One-Star {Left: 0 ؛ } .scoremark .star A.-star: hover {width: 24px} .Scoremark .Star A.Two-Stars {left: 24px ؛ } .scoremark .star A.Two-Stars: Hover {Width: 48px} .Scoremark .Star A.three-Stars {Left: 48px ؛ } .scoremark .star A.three-Stars: hover {width: 72px} .Scoremark .star A.Four-Stars {left: 72px ؛ } .scoremark .star A.Four-Stars: Hover {Width: 96px} .Scoremark .Star A.Five-Stars {left: 96px ؛ } .scoremark .star A.Five-Stars: hover {width: 120px ؛ } .scoremark .tips {الموضع: absolute ؛ أعلى: -28px ؛ اليسار: 0 ؛ العرض: 40 بكسل ؛ الارتفاع: 21px ؛ اللون: #333 ؛ رفع الخط: 20 بكسل ؛ الحشو: 0 0 5px 0 ؛ محاذاة النص: المركز ؛ الخلفية: URL (IMG/ICO.PNG) بدون تكرار ؛ Z-index: 6 ؛ حجم الخط: 12 بكسل ؛ } </style> <script src = "http://code.jquery.com/jquery-2.2.4 id = "scoremark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javaScript: void (0) href = "javaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javaScript: void (0) href = "javaScript: void (0)" data-name = "جيد جدًا"> 5 </a> </li> </ul> </span> <div style = "left: 0px ؛ display: none ؛ A star.find (". } </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 = "poor veair"> 1 </a> </li> <li> <li> <a href = "javaScript: 0) href = "javaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javaScript: void (0) href = "javaScript: void (0)" data-name = "good good"> 5 </a> </li></ul> </span> <div style = "left: 0px ؛ display: none ؛"> </viv> </div>
وصف موجز للمبدأ: أساسا علاقة تغطية الخلفية متعددة الطبقات
بادئ ذي بدء ، الهيكل: هناك طبقتان أدناه. واحد هو ystar والآخر هو ul.
4.1. تحقيق تأثير تصنيف 4 نجوم
الطبقة الخارجية. star هو عرض ثابت ، وصورة الخلفية هي نجوم رمادية مجوفة.
في الداخل ، يمثل. ystar النجوم المضاءة ، وخلفيتها هي نجوم صفراء صلبة. إذا كان هناك 4 نجوم مشرق ، فقم بتعيين عرض. ystar إلى 80 ٪. 2 حبوب منع الحمل 40 ٪.
4.2. أدرك تأثير إضاءة النجوم على تحوم الماوس
تسيطر بشكل رئيسي من خلال CSS. يتم تحقيق المفتاح من خلال: تحوم.
عندما تحوم: تمت إضافة صورة خلفية للنجوم الرمادية المجوفة.
عندما تحوم: يصبح العرض عرض النجوم القليلة الأولى.
وبهذه الطريقة ، عندما تحوم ، هناك بالفعل 4 طبقات من الخلفيات. على سبيل المثال ، عند تحوم النجم الثاني ، من الأسفل إلى الأعلى ،
.STAR Dark Star 100 ٪ عرض
4.3. نصيحة عرض تحوم الماوس
احصل على تنفيذ اسم البيانات من A إلى JS.
ما سبق هو المحتوى التفصيلي لرمز المثال (طريقتان) لتنفيذ وظيفة تصنيف النجوم لـ JS المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر لك في الوقت المناسب. شكرًا جزيلاً على دعمكم لموقع Wulin Network!