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

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

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

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

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

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

Установка:

HEAD

Код

HTML

Код

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;
}

Код

$(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');
  }
  });

});

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

Демонстрация

15 Июня 2022 Загрузок: 1 Просмотров: 1520 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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