การสร้างฟังก์ชันการให้คะแนนดาวไม่ใช่เรื่องยาก แต่การเขียนโดยใช้ CSS เพียงอย่างเดียวนั้นยากสักหน่อย
ผลลัพธ์นั้นง่ายมาก บางทีคุณอาจมีความคิดที่จะนำไปใช้ในใจอยู่แล้ว มาดูวิธีการดำเนินการตามปกติของเรา:
ซีเอสเอส:
รหัส
.jsstar
{ รายการสไตล์: ไม่มี;
ระยะขอบ: 0px;
ช่องว่างภายใน: 0px;
ความกว้าง: 100px;
ความสูง: 20px;
ตำแหน่ง: ญาติ;
-
.jsstarli
-
ช่องว่างภายใน:0px;
ระยะขอบ: 0px;
ลอย: ซ้าย;
ความกว้าง:20px;
ความสูง:20px;
พื้นหลัง: url (star_rating.gif) 0 0 ไม่ทำซ้ำ;
-
HTML:
<p>การใช้งาน Javascript + 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>
<script type="text/javascript">
$(เอกสาร).ready(function(){
$(".jsstar >li").โฮเวอร์(
function(){$(this).css({"พื้นหลังตำแหน่ง":ด้านล่างซ้าย")}).prev().trigger("mouseover")},
function(){$(this).css({"พื้นหลัง-ตำแหน่ง": "ซ้ายบน"}).prev().trigger("mouseout")})
.click(function(){alert($(this).attr("title"))});
-
</สคริปต์>
นี่คือการเรนเดอร์:
มันไม่ต่างจากที่กล่าวมาข้างต้น แต่ฉันคิดว่าหากผู้ใช้ปิดการใช้งานจาวาสคริปต์ ผลที่ได้จะไม่ร้ายแรงมากใช่หรือไม่
ดังนั้นเราจึงคิดว่าจะใช้ CSS เพียงอย่างเดียวเพื่อนำไปใช้งาน นี่คือโค้ด:
ซีเอสเอส:
รหัส
1 /*เริ่มต้น CSS Star*/
2.ระดับดาว
3 {
4 รายการสไตล์: ไม่มี;
5 ระยะขอบ: 0px;
ช่องว่างภายใน 6: 0px;
7 กว้าง: 100px;
8 ความสูง: 20px;
9 ตำแหน่ง: ญาติ;
10 พื้นหลัง: url (star_rating.gif) ซ้ายบน ซ้ำ-x;
11 }
12.การจัดอันดับดาว
13 {
14 ช่องว่างภายใน: 0px;
15 ระยะขอบ: 0px;
16 ลอย: ซ้าย;
17}
18. การจัดอันดับดาว li a
19 {
20 จอแสดงผล: บล็อก;
21 กว้าง: 20px;
22 ความสูง: 20px;
23 การตกแต่งข้อความ: ไม่มี;
24 เยื้องข้อความ: -9000px;
25 ดัชนี z: 20;
26 ตำแหน่ง: สัมบูรณ์;
27 ช่องว่างภายใน: 0px;
28 }
29 .ระดับดาว li a:hover
30 {
31 พื้นหลัง: url(star_rating.gif) ล่างซ้าย;
32 ดัชนี z: 1;
เหลือ 33: 0px;
34}
35.ระดับดาว ก.หนึ่งดาว
36 {
เหลือ 37: 0px;
38 }
39.ระดับดาว ก.หนึ่งดาว:โฮเวอร์
40 {
41 กว้าง: 20px;
42 }
43.ระดับดาว ก.สองดาว
44 {
เหลือ 45: 20px;
46 }
47.ระดับดาว ก.สองดาว:โฮเวอร์
48 {
49 กว้าง: 40px;
50 }
51.ระดับดาว ก.สามดาว:โฮเวอร์
52 {
53 กว้าง: 60px;
54 }
55.ระดับดาว ก.สามดาว
56 {
เหลือ 57: 40px;
58 }
59.ระดับดาว ก.สี่ดาว
60 {
เหลือ 61: 60px;
62 }
63.ระดับดาว ก.สี่ดาว:โฮเวอร์
64 {
65 กว้าง: 80px;
66 }
67.ระดับดาว ก.ห้าดาว
68 {
เหลือ 69: 80px;
70}
71.ระดับดาว ก.ห้าดาว:โฮเวอร์
72 {
73 กว้าง: 100px;
74
75 }
HTML:
<ul class='การให้คะแนนดาว'>
<li><a href='#' title='หนึ่งดาว' class='one-star'>1</a></li>
<li><a href='#' title='สองดาว' class='สองดาว'>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 หากคุณมีเอฟเฟกต์ที่เรียบง่ายและน่าทึ่งกว่านี้ โปรดแจ้งให้เราทราบ!