Показать сообщение отдельно
  #9 (permalink)  
Старый 08.02.2019, 10:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,734

Попробуйте так (элемент с классом .radio-block__bg-image нужно сделать фоном всего блока):
<div style="text-align: center;">  
	<div class="radiocontainer"> 
		<div class="radio-block" style="background: url('cover.png') no-repeat;"> 
			
			<img src="cover.png" class="radio-block__bg-image js-rotatable-image"/>
			
			<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
			<div id="jp_container_1" class="jp-audio-stream"> 
				<div class="jp-type-single"> 
					<div class="jp-gui jp-interface"> 
						<ul class="jp-controls"> 
							<li><a href="javascript:;" class="jp-play js-play-button" tabindex="1">Play</a></li> 
							<li><a href="javascript:;" class="jp-pause js-pause-button" tabindex="1">Pause</a></li> 
							<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">Mute</a></li> 
							<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">Unmute</a></li> 
							<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">Max volume</a></li> 
						</ul> 
						<div class="jp-volume-bar"> 
							<div class="jp-volume-bar-value"></div> 
						</div> 
						<div class="jp-current-time"></div>
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
</div>
<script>
(function(){
	const img=document.querySelector('.js-rotatable-image');
	const playButton=document.querySelector('.js-play-button');
	const cancelButton=document.querySelector('.js-pause-button');
	const degreePerCall=1;
	
	let isPlays=false;
	let curDegree=0;
	
	[playButton,cancelButton].forEach(function(node,i){
		node && node.addEventListener('click',function(){
			isPlays=!i;
		});
	});
	
	requestAnimationFrame(function rotate(){
		if(isPlays){
			curDegree=(curDegree+degreePerCall)%360;
			img.style.transform='rotate('+curDegree+'deg)';
		};
		
		requestAnimationFrame(rotate);
	});
})();
</script>

Последний раз редактировалось Nexus, 08.02.2019 в 10:32. Причина: Забыл про условие вращения
Ответить с цитированием