07.08.2017, 11:19
|
|
Новичок на форуме
|
|
Регистрация: 07.08.2017
Сообщений: 3
|
|
|
Как правильно организовать обработчик на клик и keydown?
$(function() {
function makeSound(e) {
var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");
var activeKey = document.querySelector('.key[data-key="'+code+'"]');
var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
if (!activeAudio) return;
activeAudio.currentTime = 0;
activeAudio.play();
activeKey.classList.add('active');
}
window.addEventListener('keydown', makeSound); //(1)
var allKeys = document.querySelectorAll(".key");
allKeys.forEach(function (key) {
key.addEventListener('click', makeSound);
})
allKeys.forEach(function (key) { //(2)
key.addEventListener('transitionend', function (e) {
if(e.propertyName !== 'transform') return;
this.classList.remove("active");
});
});
});
Здраствуйте!
Делал пример из курса, там был обработчик(1) на клавиатуру, при нажатии на определенный .key запускал аудио и добавлял класс active, также для каждого элемента key существует обработчик для очистки от класса (2). Скажите как мне реализовать подобное для клика? У меня все работает, да только класс после клика не удаляется. Почему так происходит?
|
|
07.08.2017, 14:02
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
|
alifanov,
Покажите, пожалуйста, еще и HTML и CSS
|
|
07.08.2017, 18:13
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Не дождался HTML и CSS от автора, пришлось сделать свой простенький макетик - без аудио.
Однако, все работает - и по цифровым клавишам, и по клику по кнопкам
<style>
.active {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
}
</style>
<button class="key" data-key="48">0</button>
<button class="key" data-key="49">1</button>
<button class="key" data-key="50">2</button>
<script>
function makeSound(e) {
var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");
var activeKey = document.querySelector('.key[data-key="'+code+'"]');
// var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
// if (!activeAudio) return;
// activeAudio.currentTime = 0;
// activeAudio.play();
activeKey.classList.add('active');
}
window.addEventListener('keydown', makeSound); //(1)
var allKeys = document.querySelectorAll(".key");
allKeys.forEach(function (key) {
key.addEventListener('click', makeSound);
})
allKeys.forEach(function (key) { //(2)
key.addEventListener('transitionend', function (e) {
if(e.propertyName !== 'transform') return;
this.classList.remove("active");
});
});
</script>
|
|
08.08.2017, 11:07
|
|
Новичок на форуме
|
|
Регистрация: 07.08.2017
Сообщений: 3
|
|
body
background-image: url(/img/drum.jpg)
background-size: cover
background-repeat: no-repeat
.main-background
height: 100vh
position: relative
.key-box
height: 60px
position: absolute
top: 50%
width: 100%
text-align: center
margin-top: -30px
.key
width: 75px
height: 60px
display: inline-block
margin-left: 20px
border: 2px solid rgba(#000, .8)
border-radius: 3px
box-shadow: 1px 1px 1px rgba(0,0,0,0.5)
background-color: rgba(#0E202C, .5)
cursor: pointer
transition: all .25s ease
&:hover
box-shadow: 2px 2px 4px rgba(0,0,0,0.8)
background-color: rgba(#0E202C, .2)
&.active, &:hover
border-color: #ffc668
transform: scale(1.2)
box-shadow: 0 0 8px #ffc668
kbd
padding-top: 12px
line-height: 18px
font-size: 18px
color: #fff
display: block
margin: 0 auto
text-align: center
span
margin: 0 auto
color: #F9BB3B
&:first-child
margin-left: 0
.section-overlay::before
content: ""
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: #0E202C
opacity: .4
Последний раз редактировалось alifanov, 08.08.2017 в 11:10.
|
|
08.08.2017, 11:12
|
|
Новичок на форуме
|
|
Регистрация: 07.08.2017
Сообщений: 3
|
|
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main-background section-overlay">
<div class="key-box">
<div data-key="65" class="key">
<kbd>A</kbd><span>clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd><span>hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd><span>kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd><span>openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd><span>boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd><span>ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd><span>snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd><span>tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd><span>tink</span>
</div>
</div>
</div>
</div>
</div>
</div>
<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>
</div>
<link rel="stylesheet" href="css/main.min.css">
<script src="js/scripts.min.js"></script>
</body>
|
|
08.08.2017, 12:06
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
И добавляется, и удаляется...
<style>
body {
background-image: url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-size: cover;
background-repeat: no-repeat;
}
.main-background {
height: 100vh;
position: relative;
}
.key-box {
height: 60px;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin-top: -30px;
}
.key {
width: 75px;
height: 60px;
display: inline-block;
margin-left: 20px;
border: 2px solid rgba(#000, .8);
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
background-color: rgba(#0E202C, .5);
cursor: pointer;
}
.active {
border-color: #ffc668;
-ms-transform:scale(1.2));
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
transition: all .25s ease;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
-moz-transition: all .25s ease;
box-shadow: 0 0 8px #ffc668;
}
kbd {
padding-top: 12px
line-height: 18px
font-size: 18px
color: #fff
display: block
margin: 0 auto
text-align: center
}
span {
margin: 0 auto
color: #F9BB3B
}
&:first-child {
margin-left: 0
}
.section-overlay::before {
content: ""
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: #0E202C
opacity: .4
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main-background section-overlay">
<div class="key-box">
<div data-key="65" class="key">
<kbd>A</kbd><span>clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd><span>hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd><span>kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd><span>openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd><span>boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd><span>ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd><span>snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd><span>tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd><span>tink</span>
</div>
</div>
</div>
</div>
</div>
</div>
<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>
</div>
<script>
function makeSound(e) {
var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");
var activeKey = document.querySelector('.key[data-key="'+code+'"]');
// var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
// if (!activeAudio) return;
// activeAudio.currentTime = 0;
// activeAudio.play();
activeKey.classList.add('active');
}
window.addEventListener('keydown', makeSound); //(1)
var allKeys = document.querySelectorAll(".key");
allKeys.forEach(function (key) {
key.addEventListener('click', makeSound);
})
allKeys.forEach(function (key) { //(2)
key.addEventListener('transitionend', function (e) {
if(e.propertyName !== 'transform') return;
this.classList.remove("active");
});
});
</script>
</body>
|
|
|
|
