ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Красивый звездный рейтинг на JavaScript

Красивый звездный рейтинг на JavaScript

Красивый звездный рейтинг на JavaScript
В данном материале представлен популярный звездного рейтинга, который выполнен на JavaScript, также задействованы стили под свой дизайн на сайте. Если кратко, то звездный рейтинг JavaScript, это распространенный веб-элемент, который в настоящее время используется многими тематическими веб-сайтами, ведь на многих направлениях можно выставить его для оценки файла или статьи. Но и безусловно на первом месте стоит прописанный эффект, где при наведении появляется смайлик соответствующей гримасой. А значит чем больше звезд ставим, тем радостнее смайл, что не ново, но просто смотрится красиво.

Так как если смотреть в реальность, то много кодов можно найти под такую анимацию, но этот считаю более простой, хотя здесь нужно прописывать библиотеку для вывода знаков. Существуют много способов получить отзывы пользователей, но самым популярным является звездный рейтинг, который вероятно изначально или по умолчанию установлен на сайтах. Для активации звездного рейтинга требуется много расширенного кода. Однако, поскольку он разработан, здесь используются только HTML, CSS и немного JavaScript.

Звездный рейтинг JavaScript


Так выглядит рейтинг при проверке на работоспособность:

Скрипт рейтинг для сайтов

Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

HTML

Код
<div class="gezdvu">
  <div class="ponavues">
  <label class="eysan">
  <input type="radio" name="radio1" id="star1" value="star1">
  <div class="face"></div>
  <i class="far fa-star gasedun one-star"></i>
  </label>
  <label class="eysan">
  <input type="radio" name="radio1" id="star2" value="star2">
  <div class="face"></div>
  <i class="far fa-star gasedun two-star"></i>
  </label>
  <label class="eysan">
  <input type="radio" name="radio1" id="star3" value="star3">
  <div class="face"></div>
  <i class="far fa-star gasedun three-star"></i>
  </label>
  <label class="eysan">
  <input type="radio" name="radio1" id="star4" value="star4">
  <div class="face"></div>
  <i class="far fa-star gasedun four-star"></i>
  </label>
  <label class="eysan">
  <input type="radio" name="radio1" id="star5" value="star5">
  <div class="face"></div>
  <i class="far fa-star gasedun five-star"></i>
  </label>
  </div>
  </div>

CSS

Код
.gezdvu {
  width: 248px;
  height: 48px;
  background: #f1e7e7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 30px;
}
.ponavues {
  width: fit-content;
  margin: 0 auto;
  line-height: 50px;
  cursor: pointer;
}
.gasedun {
  color: #7f8ecd !important;
}
.eysan {
  height: 50px;
  margin-left: -5px;
  padding: 5px;
  font-size: 25px;
  position: relative;
  cursor: pointer;
}
.eysan input[type="radio"] {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,0%);
  pointer-events: none;
}
.star-over::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;  
  font-size: 22px;
  content: "\f005";
  display: inline-block;
  color: #91a6ff;
  z-index: 1;
  position: absolute;
  top: 8px;
  left: 7px;
}

.eysan:nth-child(1) .face::after {
  content: "\f119"; /* ☹ */
}
.eysan:nth-child(2) .face::after {
  content: "\f11a"; /* */
}
.eysan:nth-child(3) .face::after {
  content: "\f118"; /* */
}
.eysan:nth-child(4) .face::after {
  content: "\f580"; /* */
}
.eysan:nth-child(5) .face::after {
  content: "\f59a"; /* */
}
.face {
  opacity: 0;
  position: absolute;
  width: 35px;
  height: 45px;
  background: #0a49a7;
  border-radius: 5px;
  top: -70px;
  line-height: 45px;
  left: 0px;
  transition: 0.2s;
  pointer-events: none;
}

.face::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f0dd";
  display: inline-block;
  color: #0a49a7;
  z-index: 1;
  position: absolute;
  left: 9px;
  bottom: -20px;
}
.face::after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
  color: #fff;
  z-index: 1;
  position: absolute;
  left: 5px;
  top: -1px;
}

.eysan:hover .face {
  opacity: 1;
}

JS

Код
$(function() {
   
  $(document).on({
  mouseover: function(event) {
  $(this).find('.far').addClass('star-over');
  $(this).prevAll().find('.far').addClass('star-over');
  },
  mouseleave: function(event) {
  $(this).find('.far').removeClass('star-over');
  $(this).prevAll().find('.far').removeClass('star-over');
  }
  }, '.eysan');

  $(document).on('click', '.eysan', function() {
  if ( !$(this).find('.gasedun').hasClass('eysan-active') ) {
  $(this).siblings().find('.star').addClass('far').removeClass('fas eysan-active');
  $(this).find('.gasedun').addClass('eysan-active fas').removeClass('far star-over');
  $(this).prevAll().find('.gasedun').addClass('fas').removeClass('far star-over');
  } else {
  console.log('has');
  }
  });
   
});

Наиболее часто используются различные онлайн-платформы, веб-сайты электронной коммерции и звездные рейтинги. Где пользователь может оставить отзыв о своем выборе по количеству звезд.

Демонстрация
2022-06-15 Загрузок: 1 Просмотров: 225 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar