js可控旋转音乐播放按钮

最新推荐文章于 2023-03-07 09:53:25 发布

夏末_阳光依然耀眼

最新推荐文章于 2023-03-07 09:53:25 发布

阅读量895

点赞数 1

分类专栏： javascript jquery

原文链接：https://www.lanrenzhijia.com/js/css3/3064.html

版权

javascript 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

jquery

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可控旋转音乐播放按钮</title>
<style>
*{ margin:0; padding:0; list-style:none;}

#lanren #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;}
#lanren .on{background: url('images/music_on.png') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url('images/music_off.png') no-repeat 0 0;}
@-webkit-keyframes rotating {
	from{
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
    	transform: rotate(0deg);
	}
	to{
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>
</head>
<body>
<script src="/demos/googlegg.js"></script>
<!--代码部分begin-->
<div id="lanren">
<div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
	<audio loop="loop" src="images/SeeYouAgain.mp3" id="media" preload="preload"></audio>
</div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
var lanren = {
	changeClass: function (target,id) {
       	var className = $(target).attr('class');
       	var ids = document.getElementById(id);
       	(className == 'on')
           	? $(target).removeClass('on').addClass('off')
           	: $(target).removeClass('off').addClass('on');
       	(className == 'on')
           	? ids.pause()
           	: ids.play();
   	},
	play:function(){
		document.getElementById('media').play();
	}
}
lanren.play();
<!--代码部分end-->

</script>
</body>
</html>