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; Список стиля: нет; Ширина: 27px; Высота: 27px; Фон: url (img/star.gif)} ul li a {display: block; Ширина: 100%; надоеволок: 27px; переполнение: скрыто; } 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> <a href = "javascript :;" href = "javascript :;"> 4 </a> </li> <li> <a href = "javascript :;"> 5 </a> </li> </ul> </body> </html>Если класс Light добавлен, он станет яркой звездой, что означает изменение фонового положения и превращение полой звезды в твердую. Поэтому, когда JS реализован, он должен добавить имя класса света в LI.
Эффект:
3. Взаимодействие JS
<Script> var num = finalnum = tempnum = 0; var lis = document.getElementsbytagname ("li"); // num: количество освещенных звезд, передаваемых в // finalnum: количество окончательных освещенных звезд // tempnum: функция промежуточного значения fnshow (num) {finalnum = num || Tempnum; // Если num, передаваемое IS 0, FinalNum берет значение Tempnum для (var i = 0; i <lis.length; i ++) {lis [i] .classname = i <finalnum? "Light": ""; // освещение звезд - это стиль добавления класса к свету}} для (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 () {// Звезды Darken, когда мышь оставляет fnshow (0); // Значение, передаваемое IS 0, FinalNum - это Tempnum, начальная - 0} write in -in -in -{//{//{//{//{//{//{//{//{//{//{//{//{//{//{//{//{//{//{//in -wrint wrint wismous быть вызванным, и значение темпнома будет изменено, чтобы осветить звезды Tempnum = this.index; }} </script>Ключевым моментом этого дизайна является то, что когда Mouout сохраняется значение, чтобы сделать звезды темными. Первоначальный составляет 0 (0 звезд становится ярче, что означает, что он совершенно темный). Если вы не нажимаете, пока мышь уйдет, все звезды будут темными. Событие CLICK запустит мышиную и мышь. Поэтому при щелчке измените температуру, чтобы определить, сколько звезд будет ярким, когда мышь уйдет. Это значение будет поддерживаться до тех пор, пока в следующий раз, когда вы нажмете.
Окончательный эффект:
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 {list-style: none;}/*rating*/// .scoremark {width: 154px; положение: относительно; маржинальный топ: 50px;} .scoremark .score {float: right; дисплей: блок; Покрас: 0 0 0 10px; размер шрифта: 18px; высота линии: 22px; шрифт-вес: жирный шрифт; Цвет: #F70; } .scoremark .star {float: right; дисплей: блок; позиция: относительно; Ширина: 116px; Высота: 20px; Фон: URL (img/star.png) без повторного перепонки 0px -20px; } .scoremark .ystar {position: Absolute; Верх: 0; слева: 0; Ширина: 116px; Высота: 20px; Фон: URL (img/star.png) без повторного перепонки 0px 0px; } .scoremark .star ul {width: 120px; Высота: 20px; позиция: абсолютно; Верх: 0; слева: 0; } .scoremark .star ul: Hover {founale: url (img/star.png) no -repeat 0px -20px; } .scoremark .star li {float: left; Ширина: 24px; Высота: 20px; } .scoremark .star li a {display: block; Ширина: 24px; Высота: 20px; переполнение: скрыто; текстовый: -9999px; позиция: абсолютно; z-index: 5; } .scoremark .star li a: hover {founly: url (img/star.png) без повторного перепонки 0px 0px; z-index: 3; слева: 0}. } .scoremark .star A.one-Star: Hover {ширина: 24px} .scoremark .star a.two-stars {слева: 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 {слева: 96px; } .scoremark .star a.five-stars: hover {width: 120px; } .scoremark .tips {position: Absolute; Верх: -28px; слева: 0; Ширина: 40px; Высота: 21px; Цвет: #333; высота линии: 20px; Заполнение: 0 0 5px 0; Текст-альбом: Центр; Предпосылки: URL (IMG/ICO.PNG) без повторения; Z-Index: 6; размер шрифта: 12px; } </style> <script src = "http://code.jquery.com/jquery-2.2.4.min.js" getgity = "sha256-bbhdlvqf/xty9gja0dq3hiwqf8lacrtxxzkrutelt44 =" crosorigin = "anonymous> </healy> <//anonymous> <//anonymous> </anonymous> <//anonymous> <//anonymous> <//anonymous> <//heaforteltelet44 id = "scoremark"> <em> 8.0 </em> <pran> <pan> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "очень плохо"> 1 </a> </li> <li> <a href = "javascript: oid (0)" data-name = "> 2 </i> </li> </li> </li> </li> </li> </li> </li> </li> </li> </href =" href = "javascript: void (0)" data-name = "More"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "лучше"> 4 </a> </li> <li> <a href = "javascript: void (0)" data-name = "лучше"> 4 </i> </a li> </a li> </a li> </a li> </a li> </a li> </a li> </href = "li> </href =" li> </href = "li> </href =" href = "javascript: void (0)" data-name = "очень хорошо"> 5 </a> </li> </ul> </span> <div style = "слева: 0px; отображение: none;"> </div> </div> <script> // Star Rating Starscore ($ (". Scoremark"); a "). MouseEnter (function () {var txt = $ (this) .attr (" data-name "); var x = $ (this) .parent (" li "). index (); star.find (". tips "). html (txt) .css (« левый »,-6+x*24) .show ();}); star.find (". Star ul li a"). MouseLeave (function () {star.find (". tips"). html (""). css ("left", 0) .hide ();}); } </script> </body> </html>4. Принцип
4.1HTML Структура
<div id = "scoremark"> <em> 8.0 </em> <pran> <pan> </span> <ul> <li> <a href = "javascript: void (0)" data-name = "очень плохо"> 1 </a> </li> <li> <a href = "javascript: void (0)" data-name = "poy"> 2 </href = "li> </li> </li? href = "javascript: void (0)" data-name = "More"> 3 </a> </li> <li> <a href = "javascript: void (0)" data-name = "лучше"> 4 </a> </li> <li> <a href = "javascript: void (0)" data-name = "лучше"> 4 </i> </a li> </a li> </a li> </a li> </a li> </a li> </a li> </href = "li> </href =" li> </href = "li> </href =" href = "javascript: void (0)" data-name = "очень хорошо"> 5 </a> </li> </ul> </span> <div style = "слева: 0px; display: none;"> </div> </div>
Краткое описание принципа: в основном взаимосвязь с многослойным фоном
Прежде всего, структура: есть два слоя ниже. Один - YSTAR, а другой - UL.
4.1. Достичь рейтингового эффекта 4 звезд
Внешний слой. Star является фиксированной шириной, а фоновое изображение - полые серые звезды.
Внутри, .ystar представляет освещенные звезды, а его фон - твердые желтые звезды. Если есть 4 ярких звезд, установите ширину .ystar на 80%. 2 таблетки 40%.
4.2. Осознайте влияние освещения звезд на прокат мыши
В основном контролируется через CSS. Ключ достигнут через: Hover.
Когда UL: пари, было добавлено фоновое изображение Hollow Grey Stars.
Когда A: Whover, ширина становится шириной первых нескольких звезд.
Таким образом, при падении, на самом деле есть 4 слоя фонов. Например, при падении второй звезды, снизу вверх,
.star Dark Star 100% Ширина. LISTAR BRIGHT STAR 80 ширина UL Dark Star 100% Ширина. Двое звезды 40% шириной
4.3. Наконечник дисплея мыши
Получите реализацию данных имени данных через JS.
Выше приведено подробное содержание примера кода (два метода) для реализации функции рейтинга Star JS, представленной вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение. Редактор ответит вам вовремя. Большое спасибо за вашу поддержку веб -сайта Wulin Network!