Jump to content

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


Recommended Posts

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

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

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

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

df.png.34899b5e8405d74f65cf65da25d292fb.png

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

 

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

dfdf.png.a177fb3ae009ad7ff6421395a765480c.png

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

Спойлер
<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>

 

P.S Писал через консоль хрома :emoji_1f605:

Автор: KirKMS

Специально для cmstools.ru

  • Like 2
  • Upvote 2
Link to comment
Share on other sites

  • 10 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...