1. Metode 1
1. Gunakan gambar
2. Struktur dan Gaya
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> dokumen </iteme> <tyle> ul {padding-left: 0; meluap: tersembunyi; } ul li {float: left; List-style: tidak ada; Lebar: 27px; Tinggi: 27px; latar belakang: url (img/star.gif)} ul li a {display: block; Lebar: 100%; Padding-top: 27px; meluap: tersembunyi; } ul li.light {latar belakang -posisi: 0 -29px; } </style></head><body> <ul> <li><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href = "javascript:;"> 4 </a> </li> <li> <a href = "javascript:;"> 5 </a> </li> </ul> </body> </html>Jika kelas cahaya ditambahkan, itu akan menjadi bintang yang cerah, yang berarti mengubah posisi latar belakang dan mengubah bintang berongga menjadi yang solid. Jadi ketika JS diimplementasikan, itu adalah untuk menambahkan nama kelas ringan ke LI.
Memengaruhi:
3. Interaksi JS
<script> var num = finalNum = tempnum = 0; var lis = document.geteLementsbyTagname ("li"); // num: Jumlah bintang yang diterangi lewat // finalnum: jumlah bintang cahaya akhir // Tempnum: fungsi nilai menengah fnshow (num) {finalNum = num || Tempnum; // Jika num lulus adalah 0, finalnum mengambil nilai tempnum untuk (var i = 0; i <lis.length; i ++) {lis [i] .className = i <finalnum? "Light": ""; // menerangi bintang adalah gaya menambahkan kelas ke cahaya}} untuk (var i = 1; i <= lis.length; i ++) {lis [i - 1] .index = i; lis [i - 1] .onmouseover = function () {// mouse lewat dan menerangi bintang. fnshow (this.index); // nilainya lewat adalah positif, yaitu finalnum} lis [i - 1] .onmouseout = function () {// Bintang -bintang gelap ketika mouse meninggalkan fnshow (0); // nilainya adalah 0, finalnum adalah Tempnum, awal adalah 0} lis [i - i -1]. akan dipanggil, dan nilai tempnum akan diubah untuk menerangi bintang tempnum = this.index; }} </script>Poin kunci dari desain ini adalah bahwa ketika mouout, nilai disimpan untuk membuat bintang -bintang gelap. Awal adalah 0 (0 bintang menjadi lebih cerah, yang berarti benar -benar gelap). Jika Anda tidak mengklik, selama mouse pergi, semua bintang akan gelap. Acara klik akan memicu mouseover dan mouseout. Oleh karena itu, saat mengklik, ubah tempnum untuk menentukan berapa banyak bintang yang akan cerah ketika mouse pergi. Nilai ini akan dipertahankan sampai waktu berikutnya Anda mengklik.
Efek Akhir:
2. Metode 2
1. Gunakan gambar
2. Efeknya adalah sebagai berikut
3. Kode lengkapnya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> demo starof </itement> <tyle> ul {padding: 0; margin: 0;} Li {List-style: none;}/*Rating Star*/.scoremark {li {List: none;}/*Rating Star*/.scoremark {width: None; .scoremark .score {float: right; Tampilan: Blok; Margin: 0 0 0 10px; font-size: 18px; Line-Height: 22px; font-weight: tebal; Warna: #F70; } .scoremark .star {float: right; Tampilan: Blok; Posisi: kerabat; Lebar: 116px; Tinggi: 20px; Latar belakang: url (img/star.png) no -repeat 0px -20px; } .scoremark .ystar {position: absolute; TOP: 0; Kiri: 0; Lebar: 116px; Tinggi: 20px; Latar belakang: url (img/star.png) no-repeat 0px 0px; } .scoremark .star ul {width: 120px; Tinggi: 20px; Posisi: Absolute; TOP: 0; Kiri: 0; } .scoremark .star ul: hover {background: url (img/star.png) no -repeat 0px -20px; } .scoremark .star li {float: left; Lebar: 24px; Tinggi: 20px; } .scoremark .star li a {display: block; Lebar: 24px; Tinggi: 20px; meluap: tersembunyi; Text -Indent: -9999px; Posisi: Absolute; z-index: 5; } .scoremark .star li a: hover {latar belakang: url (img/star.png) no-repeat 0px 0px; z-index: 3; Kiri: 0} .scoremark .star a.one-star {kiri: 0; } .scoremark .star a.one-star: hover {width: 24px} .scoremark .star a.two-stars {kiri: 24px; } .scoremark .star a.two-stars: hover {width: 48px} .scoremark .star A. three-stars {kiri: 48px; } .scoremark .star A. three-stars: hover {width: 72px} .scoremark .star a.four-stars {kiri: 72px; } .scoremark .star a.four-stars: hover {width: 96px} .scoremark .star a.five-stars {kiri: 96px; } .scoremark .star a.five-stars: hover {width: 120px; } .scoremark .tips {position: absolute; Atas: -28px; Kiri: 0; Lebar: 40px; Tinggi: 21px; Warna: #333; Line-Height: 20px; Padding: 0 0 5px 0; Teks-Align: tengah; Latar Belakang: URL (IMG/ICO.PNG) NO-REPEAT; z-index: 6; font-size: 12px; } </tyle> <skrip src = "http://code.jquery.com/jquery-2.2.4.min.js" integrity = "sha256-bhdlvqf/xty9gja0dq3Hiwqf8" noad "<prosory =" cript/criptxxzkrutelt44 id = "scoreMark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "sangat miskin"> 1 </a> </li> <li> <a href = "JavaScript: void (0)" Data-name = "Li- li <a> <a/li <a> <a href" href = "JavaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "lebih baik"> 4 </a> </li> <li> <a href = "Javascript: void (0)" </Li> <a "<a" </Li </Li </Li <a "</Li </Li <a> </Li <a> </lon" BEBER " href = "javascript: void (0)" data-name = "sangat bagus"> 5 </a> </li> </ul> </span> <div style = "kiri: 0px; display: none;"> </div> </div> <ript> // star starscore ($ (". a "). mouseEnter (function () {var txt = $ (this) .attr (" data-name "); var x = $ (this) .parent (" li "). index (); star.find (". star.find (". Star ul li a"). mouseleave (function () {star.find (". } </script> </body> </html>4. Prinsip
Struktur 4.1HTML
<Div id = "scoreMark"> <em> 8.0 </em> <span> <span> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "sangat buruk"> 1 </a> </li> <li> <a href = "Javascript: void (0)" </Li> <li> <a href = "Javascript: void (0)" </Li> <li> <a href = "Javascript: void (0)" DATA "</Li> <a" </a "<bef =" Javascript: Void (0) "DATA" </Li> <li> <a href = "JAVASCRIPS: VOID (0)" href = "JavaScript: void (0)" data-name = "more"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "lebih baik"> 4 </a> </li> <li> <a href = "Javascript: void (0)" </Li> <a "<a" </Li </Li </Li <a "</Li </Li <a> </Li <a> </lon" BEBER " href = "javascript: void (0)" data-name = "sangat bagus"> 5 </a> </li> </ul> </span> <div style = "kiri: 0px; display: none;"> </div> </div>
Deskripsi singkat tentang prinsip: terutama hubungan cakupan latar belakang multi-lapisan
Pertama -tama, struktur: ada dua lapisan di bawah ini. Satu adalah ystar dan yang lainnya adalah ul.
4.1. Mencapai efek peringkat 4 bintang
Lapisan luar.Star adalah lebar tetap, dan gambar latar belakang adalah bintang abu -abu berongga.
Di dalam, .ystar mewakili bintang -bintang yang menyala, dan latar belakangnya adalah bintang kuning solid. Jika ada 4 bintang cerah, atur lebar .isttar menjadi 80%. 2 pil adalah 40%.
4.2. Sadarilah efek menerangi bintang -bintang di landasan tikus
Terutama dikendalikan melalui CSS. Kuncinya dicapai melalui: melayang.
Ketika Ul: Arahkan, gambar latar belakang bintang abu -abu berongga ditambahkan.
Ketika A: Arahkan, lebar menjadi lebar beberapa bintang pertama.
Dengan cara ini, ketika melayang, sebenarnya ada 4 lapisan latar belakang. Misalnya, saat melayang bintang kedua, dari bawah ke atas,
. Bintang gelap bintang lebar 100%. Bintang terang bintang 80 Lebar Ul Dark Star 100% Lebar.
4.3. Tip tampilan Mouse Hover
Dapatkan implementasi data-nama melalui JS.
Di atas adalah konten terperinci dari kode contoh (dua metode) untuk mengimplementasikan fungsi peringkat bintang JS yang diperkenalkan kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda untuk situs web Wulin Network!