Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.02.2019, 12:47
Интересующийся
Отправить личное сообщение для Puzzle Посмотреть профиль Найти все сообщения от Puzzle
 
Регистрация: 29.05.2017
Сообщений: 12

Nexus,
Скажите пожалуйста, а могли бы вы ещё помочь с тем чтобы эта картинка cover.png и была самой кнопкой Play ?
А то я вот всё вожусь с того момента как вы написали, но что-то не смог так сделать(

Последний раз редактировалось Puzzle, 08.02.2019 в 13:23.
Ответить с цитированием
  #12 (permalink)  
Старый 08.02.2019, 13:28
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Puzzle, элемент с классом:
js-rotatable-image - вращаемый элемент;
js-play-button - элемент, при нажатии на который вращение начнется/продолжится;
js-pause-button - элемент, при нажатии на который вращение прекратится.

На странице может быть только 1 элемент с перечисленными классами (если будет несколько, то браться будет первый попавшийся).

Сообщение от Puzzle
чтобы эта картинка cover.png и была самой кнопкой Play
Добавьте изображению еще и класс js-play-button

Сообщение от Puzzle
как уменьшить скорость анимации
Уменьшите значение константы degreePerCall (строка 33 в моем коде).
Ответить с цитированием
  #13 (permalink)  
Старый 08.02.2019, 14:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот идея с одной кнопкой включения/выключения и вращением диска-картинки...

<button class="radio-controls-play-button"></button>

<script>

document.addEventListener("click", event =>{
	if(event.target.matches(".radio-controls-play-button"))
		event.target.classList.toggle("play");
});

</script>

<style>

.radio-controls-play-button {
	position: relative;
	padding: 1em;
}

.radio-controls-play-button::before {
	content: "";
	background: url(https://is3-ssl.mzstatic.com/image/thumb/Purple118/v4/0c/f5/f4/0cf5f426-a35d-b047-b383-09a4f5e428d6/AppIcon-1x_U007emarketing-85-220-8.png/246x0w.jpg) center / cover;
	width: 10em;
	height: 10em;
	border-radius: 100%;
	display: block;
	animation: 5s rotate linear infinite;
	animation-play-state: paused;
}

.radio-controls-play-button.play::before {
	animation-play-state: running;
}

.radio-controls-play-button::after {
	content: "▶\fe0f";
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: xx-large;
	transform: translate(-50%, -50%);
}
	
.radio-controls-play-button.play::after {
	content: "⏸\fe0f";
}

@keyframes rotate {
	to {
		transform: rotate(1turn);
	}
}

</style>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увелечение картинки по клику Otvertka12335 Элементы интерфейса 3 05.01.2018 19:03
Что-то не работает: смена картинки по клику. pro_moscow Элементы интерфейса 4 05.08.2016 05:01
как сделать выпадающие картинки по клику с перезаписью select thefair Общие вопросы Javascript 5 15.12.2015 22:54
получить адрес картинки по клику saxap Общие вопросы Javascript 3 13.11.2012 12:32
увеличение картинки по клику highslide terveg Общие вопросы Javascript 1 16.11.2010 14:39