HBuilder:微信h5实现音乐图标旋转播放,停止暂停

效果

代码实现

html
<!--       右上角音乐及图标-->
		<section class="u-audio">
			<audio src="img/111.mp3" autoplay="autoplay" id="music"  preload loop="loop"></audio>
			<div id="page1">
				<img id="rallback" src="img/normalmusic.svg" style="width: 60px;height: 60px;"></img>
			</div>
		</section>
		<!--       右上角音乐及图标-->
js
<script type="text/javascript">
			window.onload = function() {
				/*右上角音乐及图标*/
				var flag = 1; //开启音乐
				var music = document.getElementById('music');
				var rallback = document.getElementById('rallback');

				window.onclick = function() {
					if(flag == 1) {
						music.pause(); /*音乐关闭*/
						flag = 0;
						rallback.style.webkitAnimationPlayState = "paused"; //旋转动画暂停
					} else {
						music.play(); /*音乐开启*/
						flag = 1;
						rallback.style.webkitAnimationPlayState = "running"; //旋转动画暂停
					}
				}

				/*不允许有多个onload*/
				/*控制选项卡切换*/
				var myTab = document.getElementById("tab"); //整个div
				var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
				var myLi = myUl.getElementsByTagName("li"); //数组
				var myDiv = myTab.getElementsByTagName("div"); //数组

				for(var i = 0; i < myLi.length; i++) {
					myLi[i].index = i;
					myLi[i].onclick = function() {
						for(var j = 0; j < myLi.length; j++) {
							myLi[j].className = "off";
							myDiv[j].className = "hide";
						}
						this.className = "on";
						myDiv[this.index].className = "show";
					}
				}

			}
		</script>
css
#page1 #rallback {
	/*css3动画无限制的旋转*/
	-webkit-animation: music_disc 4s linear infinite;
	animation: music_disc 4s linear infinite;
	/*-webkit-animation-direction:alternate;*/
	/*//平滑的过渡---反方向运动*/
}

/*  page1旋转暂停 animation-play-state属性 当你想在动画执行过程中暂停,并且接下来让动画接着执行。这时CSS的animation-play-state属性是非常有用的。你可以可以通过JavaScript像这样更改CSS(注意你的前缀): element.style.webkitAnimationPlayState="paused";
element.style.webkitAnimationPlayState="running";
 */

/*css3动画的旋转*/

@-webkit-keyframes music_disc {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	}
}


img

在这里插入图片描述

发布了10 篇原创文章 · 获赞 6 · 访问量 5847
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览