ليس من الصعب إنشاء وظيفة تصنيف النجوم، ولكن من الصعب بعض الشيء كتابتها ببساطة باستخدام CSS، فلنأخذ لقطة شاشة أولاً:
التأثير بسيط جدًا، ربما لديك بالفعل فكرة تنفيذه في عقلك. دعونا نلقي نظرة على طريقة التنفيذ المعتادة لدينا:
CSS:
شفرة
.jsstar
{نمط القائمة: لا شيء؛
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
العرض: 100 بكسل؛
الارتفاع: 20 بكسل؛
الموقف: نسبي؛
}
.jsstarli
{
الحشو: 0 بكسل؛
الهامش: 0 بكسل؛
تعويم: يسار؛
العرض: 20 بكسل؛
الارتفاع: 20 بكسل؛
الخلفية:url(star_ating.gif) 0 0 بدون تكرار؛
}
HTML:
<p>تنفيذ جافا سكريبت + CSS</p>
<ul class="jsstar">
<li title="نجمة واحدة"></li>
<li title="نجمتان"></li>
<li title="سامسونج"></li>
<li title="أربع نجوم"></li>
<li title="خمس نجوم"></li>
</ul>
JS: (أستخدم jquery)
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<نوع البرنامج النصي = "نص/جافا سكريبت">
$(مستند).جاهز(وظيفة(){
$(".jsstar >لي").hover(
function(){$(this).css({"background-position": "left Bottom"}).prev().trigger("mouseover")},
function(){$(this).css({"background-position":left top"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
});
</script>
هنا هو التقديم:
ألا يختلف الأمر عما سبق، ولكن أعتقد أنه إذا قام المستخدم بتعطيل جافا سكريبت، ألن يكون التأثير كارثيًا للغاية؟
لذلك فكرنا في استخدام CSS خالصًا لتنفيذه، وإليك الكود:
CSS:
شفرة
1 /*بداية CSS ستار*/
2. تصنيف النجوم
3 {
4 نمط القائمة: لا شيء؛
5 الهامش: 0 بكسل؛
6 الحشو: 0px؛
7 العرض: 100 بكسل؛
8 الارتفاع: 20 بكسل؛
9 الموقف: نسبي.
10 الخلفية: url(star_ating.gif) أعلى اليسار تكرار-x؛
11 }
12. تصنيف النجوم
13 {
14 الحشو: 0px؛
15 هامش: 0 بكسل؛
16 تعويم: يسار؛
17}
18. تصنيف النجوم لي أ
19 {
20 عرض: كتلة؛
21 العرض: 20 بكسل؛
22 الارتفاع: 20 بكسل؛
23 زخرفة النص: لا شيء؛
24 مسافة بادئة للنص: -9000 بكسل؛
25 مؤشر z: 20؛
26 موقف: مطلق؛
27 الحشو: 0 بكسل؛
28 }
29 .تصنيف النجوم لي أ:تحوم
30 {
31 الخلفية: url(star_ating.gif) في الأسفل الأيسر؛
32 مؤشر z: 1؛
33 اليسار: 0 بكسل؛
34}
35. تصنيف النجوم أ.نجمة واحدة
36 {
37 اليسار: 0 بكسل؛
38 }
39.تصنيف النجوم أ.نجمة واحدة:تحوم
40 {
41 العرض: 20 بكسل؛
42 }
43.التصنيف بالنجوم أ.نجمتان
44 {
45 اليسار: 20 بكسل؛
46 }
47.تصنيف النجوم أ.نجمتان:تحويم
48 {
49 العرض: 40 بكسل؛
50 }
51.تصنيف النجوم أ.ثلاث نجوم:تحوم
52 {
53 العرض: 60 بكسل؛
54 }
55.تصنيف النجوم أ.ثلاث نجوم
56 {
57 اليسار: 40 بكسل؛
58 }
59.تصنيف النجوم أ.أربع نجوم
60 {
61 اليسار: 60 بكسل؛
62 }
63. تصنيف النجوم أ. أربع نجوم: تحوم
64 {
65 العرض: 80 بكسل؛
66 }
67.تصنيف النجوم أ.خمس نجوم
68 {
69 اليسار: 80 بكسل؛
70}
71. تصنيف النجوم أ. خمس نجوم: تحوم
72 {
73 العرض: 100 بكسل؛
74
75 }
HTML:
<ul class='تقييم النجوم'>
<li><a href='#' title='نجمة واحدة' class='نجمة واحدة'>1</a></li>
<li><a href='#' title='نجمتان' class='two-stars'>2</a></li>
<li><a href='#' title='Samsung' class='three-stars'>3</a></li>
<li><a href='#' title='four-stars' class='four-stars'>4</a></li>
<li><a href='#' title='五星' class='five-stars'>5</a></li>
</ul>
بالنظر إلى أرقام أسطر CSS أعلاه، هل تشعر بالصدمة لأن مثل هذا التأثير البسيط يتطلب الكثير من التعليمات البرمجية؟ في رأيي، يمكنك الحصول على تأثير واحد ونمط واحد فقط دون استخدام JS. إذا كان لديك تأثير أبسط وأكثر إبهارًا، فيرجى إخباري بذلك!