3

Мне нужно реализовать подсветку кнопок.
Представьте старый телевизор на котором несколько кнопок для переключения каналов.
При нажатии на первый канал подсвечивается первая кнопка,
при нажатии на третий - подсвечивается третья, а первая гаснет. И так далее..

1

1 ответ 1

15

Используйте input type="radio". Стилизуйте в соответствии с задачами. Чтобы кнопки были взаимосвязаны, нужно, чтобы атрибут name был у всех одинаков (при этом, кнопки не обязательно могут располагаться рядом, но будут влиять друг на друга).

var aMovies = [
  '//thenewcode.com/assets/videos/polina.mp4',
  '//player.vimeo.com/external/147170142.mobile.mp4?s=1749c726401a405237c982e9d977742958443cda&profile_id=116',
  '//ktonanovenkogo.ru/image/apple-ipad-2.mp4',
  '//player.vimeo.com/external/200257358.sd.mp4?s=4159717ed062efbc725a707c1ec26c39ebdfb042&profile_id=164',
  '//player.vimeo.com/external/143052525.mobile.mp4?s=6b58c3fe5c39dd7d1bd421d5223a3f5dbbdcaf06&profile_id=116',
  '//player.vimeo.com/external/147169807.mobile.mp4?s=2bdef7f971b4394cfae2b3baee36ac3c7f3e0736&profile_id=116',
  '//player.vimeo.com/external/191745496.sd.mp4?s=bbf9c6cd8972995f3d2d5068b88c1e9ed6de8d00&profile_id=164',
  '//player.vimeo.com/external/147170152.mobile.mp4?s=591d0f1f5faa1338a9e6f6e56578e881b091aeb1&profile_id=116'
]
var oVideo = document.getElementById('bgvid');
oVideo.volume = 0;
document.querySelector('div.control').addEventListener('click', function(e) {
  if (e.target.type == 'radio' && e.target.checked) {
    oVideo.src = aMovies[parseInt(e.target.value)];
  } else if (e.target.type == 'checkbox') {
    if (e.target.checked) {
      Array.prototype.slice.call(document.querySelectorAll('input[type=\'radio\']')).forEach(function(element) {
        element.style.pointerEvents = 'all';
      });
      oVideo.poster = 'https://img-fotki.yandex.ru/get/51236/156337956.b/0_354d06_d46fbc8c_orig.gif';
    } else {
      Array.prototype.slice.call(document.querySelectorAll('input[type=\'radio\']')).forEach(function(element) {
        element.checked = false;
        element.style.pointerEvents = '';
      });
      oVideo.poster = 'https://i.stack.imgur.com/kRNKL.gif';
      oVideo.src = '';
    }
  }
});
.box {
  background: #d9d9d9;
  border: 1px solid #666666;
  box-shadow: 14px 20px 38px -12px black;
  height: 265px;
  position: relative;
  width: 410px;
  margin: 10% auto;
}

.display {
  background-color: #111;
  background-image: radial-gradient( rgba(255, 255, 255, 0.71) -20%, rgba(240, 109, 6, 0) 77%);
  background-position: -20px -20px;
  border-radius: 15%;
  box-shadow: -1px 0px 2px 5px rgba(0, 0, 0, 0.33), inset 1px 1px 9px 15px rgb(0, 0, 0);
  height: 240px;
  left: 10px;
  overflow: hidden;
  position: relative;
  top: 10px;
  width: 320px;
}

.display::after {
  background-image: radial-gradient( rgba(255, 255, 255, 0.47) 15%, rgba(240, 109, 6, 0) 65%);
  background-position: -60px -55px;
  background-repeat: no-repeat;
  border-radius: 15%;
  box-shadow: inset 1px 1px 79px 11px rgba(0, 0, 0, 0.33);
  content: '';
  height: 240px;
  left: 0;
  position: absolute;
  top: 0;
  width: 320px;
}

video {
  height: 100%;
}

.speaker {
  background: linear-gradient( #595959 50%, transparent 50%);
  background-color: #d9d9d9;
  background-size: 18px 4px;
  border: 1px solid #ccc;
  border-radius: 50%;
  height: 119px;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 60px;
}

.brand {
  bottom: 120px;
  height: 15px;
  object-fit: cover;
  object-position: 0% 0%;
  position: absolute;
  right: 8px;
  width: 65px;
}

.control {
  background: #bfbfbf;
  border: 1px solid #333;
  border-radius: 5%;
  bottom: 7px;
  box-shadow: inset 1px 2px 4px 0px rgba(0, 0, 0, 0.46);
  height: 107px;
  position: absolute;
  right: 10px;
  width: 55px;
}

input[type='radio'] {
  appearance: none;
  display: block;
  height: 10px;
  left: 10px;
  -moz-appearance: none;
  outline: none;
  pointer-events: none;
  position: relative;
  -webkit-appearance: none;
  width: 0;
}

input[type='radio']::before {
  background-color: #9199a1;
  border: 1px solid #242729;
  border-radius: 25%;
  box-shadow: 1px 1px 5px 0px black;
  content: '';
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
}

input[type='radio']:checked::after {
  background-color: rgb(246, 71, 44);
  border: 2px solid rgba(166, 43, 55, 0.68);
  border-radius: 37%;
  box-shadow: 0px 0px 10px 2px #EF0E0E;
  content: '';
  height: 7px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  width: 8px;
}

input[type='checkbox'] {
  background-image: radial-gradient(#ff4400 0%, #b0b0b0 31%, #e63d00 51%, #b0b0b0 50%);
  border: 1px solid #4d545b;
  border-radius: 25%;
  box-shadow: 1px 1px 2px 0px #000000;
  height: 16px;
  margin: 0;
  outline: none;
  position: absolute;
  right: 6px;
  top: 3px;
  -webkit-appearance: none;
  width: 16px;
}

input[type='checkbox']:checked {
  background-image: radial-gradient(#000000 -5%, #b0b0b0 31%, #000000 56%, #b0b0b0 60%);
  border: 1px solid #000000;
  box-shadow: 0px 0px 1px 0px #000000;
  height: 16px;
  right: 6px;
  top: 4px;
  width: 16px;
}

input[type='range'] {
  appearance: none;
  bottom: 40px;
  -moz-appearance: none;
  outline: none;
  position: absolute;
  right: -28px;
  transform: rotate(-90deg);
  -webkit-appearance: none;
  width: 76px;
}

input[type='range']::after {
  background: repeating-linear-gradient(to top, #bfbfbf, #bfbfbf 2%, rgba(0, 0, 0, 0.4) 3%, rgba(0, 0, 0, 0.4) 3%, #bfbfbf 4%, #bfbfbf 12%);
  bottom: -39px;
  content: '';
  height: 82px;
  position: absolute;
  right: 27px;
  transform: rotate(-90deg);
  width: 20px;
  z-index: -1;
}

input[type="range"]::-webkit-slider-thumb {
  background: linear-gradient(to left, #ffffff 0%, #d9d9d9 50%, #404040 100%);
  border: 1px solid #6a737c;
  border-radius: 10%;
  height: 15px;
  margin-top: -6px;
  -webkit-appearance: none;
  width: 8px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to top, #ffffff 0%, #000000 50%, #404040 100%);
  height: 3px;
}
<div class="box">
  <div class="display">
    <video poster="" name="media" id="bgvid" playsinline autoplay loop preload="auto" src="">
</video>
  </div>
  <div class="speaker"></div>
  <img class="brand" src="https://cdn.sstatic.net/Sites/ru/img/sprites.svg?v=f508971f422f">
  <div class="control">
    <!-- Блок, отвечающий на стартовый вопрос -->
    <input type="radio" name="chanel" value="0">
    <input type="radio" name="chanel" value="1">
    <input type="radio" name="chanel" value="2">
    <input type="radio" name="chanel" value="3">
    <input type="radio" name="chanel" value="4">
    <input type="radio" name="chanel" value="5">
    <input type="radio" name="chanel" value="6">
    <input type="radio" name="chanel" value="7">
    <!------------------------------------------>
    <input type="checkbox">
    <input type="range" class="volume" value="30" OnInput="document.getElementById('bgvid').volume = this.value / 100;">
  </div>
</div>

Серфим по каналам) Не забываем включить до, и выключить после просмотра. (Звук только на третьем канале.)

8
  • 3
    заченил лайком :)
    – Randall
    21 авг 2018 в 11:55
  • 3
    @Избытоксусликов , благодарю. Вот, что значит, когда на работе работы нет))
    – UModeL
    21 авг 2018 в 11:57
  • 2
    какой кайфовый ответ ;) 28 авг 2018 в 11:57
  • 1
    @ArtemGorlachev стараюсь сделать с нуля и наглядно, с кучей дополнительных фишек - вдруг кому-то идею подкину или ответ найдёт неожиданно.
    – UModeL
    28 авг 2018 в 12:00
  • 1
    @UModeL классный ответ! Как говорит молодёжь,- респект и уважуха!:))) Я серьезно! 17 дек 2018 в 14:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.