Рейтинг в стиле Эмоджи

KirKMS · 12 декабря, 2019

Дело было вечером и делать было не чего.

Решил фигнёй по страдать.У меня заказали сайт, и заказчик попросил сделать рейтинг для клиента.Которого добавляет.

Правда он выразился так "Сделай рейтинг типо клиент пришел, начал добавлять его и выбрал типо пи**ило,му**ло итд"

Решил на кидать пример.И так получилось,что всё не плохо и смотрится.Правда колхозно.

При нажатие на эмоджика.Остальные пропадают.

Спустя 20 минут.Сделал реализацию на сайте

Вот и сами заготовки.

Спойлер


<style>
.left_icon:hover {
    background-color: #e2e2e2 !important;
text-decoration: none;
}
</style>
<script type="text/javascript">

var icon = {
go: function(id) {
  if(id == 1){
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 2){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 3){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 4){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId5').style.display = 'none';
  }
  if(id == 5){
    document.getElementById('iconId1').style.display = 'none';
    document.getElementById('iconId2').style.display = 'none';
    document.getElementById('iconId3').style.display = 'none';
    document.getElementById('iconId4').style.display = 'none';
  }
  
}
}
</script>		
<div style="float: right;margin-top: 5px;margin-right: 5px;">
<a href="#" onClick="icon.go(1);"><span class="left_icon" id="iconId1"  style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f621.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(2);"><span class="left_icon" id="iconId2" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f612.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(3);"><span class="left_icon" id="iconId3" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f610.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(4);"><span class="left_icon" id="iconId4" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f60a.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
<a href="#" onClick="icon.go(5);"><span class="left_icon" id="iconId5" style="background: url(http://cmstools.ru/uploads/emoticons/emoji_1f60c.png);background-size: 100%;width: 65px;height: 65px;cursor: pointer;float: left;border-radius: 50%;"></span></a>
</div>