音乐盒

最新推荐文章于 2024-06-27 10:51:38 发布

sun_wz

最新推荐文章于 2024-06-27 10:51:38 发布

阅读量273

点赞数

分类专栏：程序员小姿文章标签： jquery 音乐盒

本文链接：https://blog.csdn.net/L6_6LXXX/article/details/100126761

版权

程序员小姿专栏收录该内容

15 篇文章 0 订阅

订阅专栏

音乐盒

css代码

<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			#container {
				width: 100%;
				height: 655px;
				position: relative;
				background: url(img/音乐背景_WPS图片1.jpg) no-repeat;
				background-size: 100% 100%;
			}
			
			#btns {
				width: 700px;
				height: 80px;
				position: absolute;
				top: 570px;
				background-color: rgba(0, 0, 0, 1);
			}
			#title{
				width: 200px;
				height: 30px;
				font-size: 20px;
				position: absolute;
				top: 30px;
				left: 20px;
				color: pink;
			}
			
			
			#shrink {
				width: 22px;
				height: 80px;
				position: absolute;
				top: 0;
				right: 0;
				background: url(img/player_bg.png);
				background-position: 0px -12px;
				opacity: 0.7;
			}
			
			#upmusic {
				width: 30px;
				height: 30px;
				position: absolute;
				top: 30px;
				left: 250px;
				background: url(img/player_bg.png);
				background-position: -71px 0px;
				opacity: 0.7;
			}
			
			#upmusic:hover {
				background-position: -71px -32px;
			}
			
			#start {
				width: 30px;
				height: 40px;
				position: absolute;
				top: 25px;
				left: 350px;
				background: url(img/player_bg.png);
				background-position: -112px 0px;
				opacity: 0.7;
			}
			
			#start:hover {
				background-position: -112px -42px;
			}
			
			#downmusic {
				width: 30px;
				height: 30px;
				position: absolute;
				top: 30px;
				left: 440px;
				background: url(img/player_bg.png);
				background-position: -151px 0px;
				opacity: 0.7;
			}
			
			#downmusic:hover {
				background-position: -151px -32px;
			}
			
			#mute{
				width: 30px;
				height: 30px;
				position: absolute;
				top: 30px;
				
			}
			
			video{
				position: absolute;
				top: 20px;
				left: 540px;
				width: 300px;
				height: 50px;
			}
			
			#imgs {
				width: 800px;
				height: 200px;
				position: absolute;
				top: 100px;
				left: 300px;
			}
			
			#img1 {
				background: url(img/1.png) no-repeat;
				position: absolute;
				top: 55px;
			}
			
			#img2 {
				
				background: url(img/2.png) no-repeat;
				position: absolute;
				top: 25px;
				left: 200px;
			}
			
			#img3 {
				background: url(img/3.png) no-repeat;
				position: absolute;
				top: 35px;
				left: 400px;
			}
			
			#img4 {
				background: url(img/4.png) no-repeat;
				position: absolute;
				top: 15px;
				left: 600px;
			}
			#img1,#img2,#img3,#img4{
				width: 100px;
				height: 100px;
				outline: none;
				border-style:solid;
				box-shadow: 1px 0px 20px 2px pink;
				background-size: 100% 100%;
				border-radius: 50%;
				
				animation: imgrot 5s linear infinite paused;
			}
			
			@keyframes imgrot {
				0% {
					transform-origin: 50% 50%;
					transform: rotate(0deg) scale(1);
				}
				
				50% {
					transform-origin: 50% 50%;
					transform: rotate(180deg) scale(1.3);
				}
				
				100% {
					transform-origin: 50% 50%;
					transform: rotate(360deg) scale(1);
				}
			}
			#faster{
				color: white;
			}
			#time{
				color: white;
			}
			select{
				width: 100px;
				height: 40px;
				font-size: 20px;
				color: white;
				border:1px solid pink;
				opacity: 0.7;
				background-color: rgba(0, 0, 0, 0.7);
				position: absolute;
				top: 20px;
				left: 550px;
			}
		</style>

html代码

	<div id="container">
			<div id="imgs">
				<button type="button" id="img1" class="img" onclick="dorotate();"></button>
				<button type="button" id="img2" class="img" onclick="dorotate();"></button>
				<button type="button" id="img3" class="img" onclick="dorotate();"></button>
				<button type="button" id="img4" class="img" onclick="dorotate();"></button>
				
			</div>

			<div id="btns">
				 
				<marquee id="title" direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()"  onmouseover="this.stop()" scrollamount="2" scrolldelay="1"></marquee>
				<div id="upmusic" onclick="front()"></div>
				<div id="start" onclick="isplay()"></div>
				<div id="downmusic" onclick="next()"></div>
				<div id="shrink" onclick="shrink1()"></div>
				<select id="speed" onchange="dospeed(this);">
					<option>倍速2</option>
					<option>倍速1.3</option>
					<option selected="selected">倍速1</option>
					<option>倍速0.7</option>
				</select>
				
				<video  controls="controls" loop="loop"  hidden="hidden" controlsList="nodownload">
			</div>

		</div>

js代码

<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			
			var musics = {"1":"泥鳅Niko - 胆小鬼","2":"刘惜君 - 我很快乐","3":"沈以诚 - 越来越不懂","4":"薛之谦 - 绅士"};
			
			$(function(){
				video.src="mp3/1.mp3";
			});
			
			
			
			var video = document.getElementsByTagName("video")[0];
			var countmp3 = "1";
			console.log(video.src);
			//上一首
			function front(){
				//路径
				if(countmp3=="1"){
					countmp3="4";
				}else{
					countmp3=Number(countmp3)-1;
				}
				video.src="mp3/"+countmp3+".mp3";
				countplay = false;
				isplay();
				
				
			};
			
			//下一首
			function next(){
				//路径
				
				if(countmp3=="4"){
					countmp3="1";
				}else{
					countmp3=Number(countmp3)+1;
				}
				
				video.src="mp3/"+countmp3+".mp3";
				countplay = false;
				isplay();
				
			};
			
			
			var countplay=false;
			//
			function isplay(){
				var s = video.src;
				s=s.split("mp3/")[1];
				s=s.split(".mp3")[0];
				
				if(countplay){
					pause();
					$("#title").text("");
					$(".img").css({"animation-play-state":"paused"});
					$("#img"+s).css({"animation-play-state":"paused"});
					countplay=false;
					
				}else{
					play();
					$("#title").text(musics[s]);
					$(".img").css({"animation-play-state":"paused"});
					$("#img"+s).css({"animation-play-state":"running"});
					countplay=true;
				}
			}
			
			function play() {
				video.play();
				$("#start").hover(
					function () {
					   $("#start").css("background-position","-342px -90px");
					},
					function () {
					    $("#start").css("background-position","-300px -90px");
					}
				);
				$("#start").css("background-position","-300px -90px");
				
			}

			function pause() {
				video.pause();
				$("#start").hover(
					function () {
					   $("#start").css("background-position","-112px -42px");
					},
					function () {
					    $("#start").css("background-position","-112px 0px");
					}
				);
				$("#start").css("background-position","-112px 0px");
			}

			function dospeed(t){
				var s = $("#speed").val();
				s= s.split("倍速")[1];
				video.playbackRate = s;
			}
			
			var countimg = false;
			function dorotate() {
				//清除其他旋转
				$(".img").css({"animation-play-state":"paused"});
				var str = event.path[0].id;
				str = str.split("img")[1];
				countmp3=str;
				console.log(countmp3); 
				if(countimg){
					$(event.path[0]).css({"animation-play-state":"paused"});
					countimg = false;
					video.src="mp3/"+str+".mp3";
					isplay(); 	
				}else{
					$(event.path[0]).css({"animation-play-state":"running"});
					countimg = true;
					video.src="mp3/"+str+".mp3";
					isplay(); 	
				}
			}
			
			
			var flagshrink=false;
			function shrink1(){
				if(flagshrink){
					$("#btns").animate({left: '0px'}, "slow");
					$("#shrink").css("background-position","0px -12px");
					flagshrink=false;
				}else{
					$("#btns").animate({left: '-680px'}, "slow");
					$("#shrink").css("background-position","-22px -12px");
					flagshrink=true;
					
				}
			
			}

		</script>

界面图

在这里插入图片描述

功能

点击按钮播放，对应歌曲图标旋转
点击上一首/下一首，对应歌曲播放，对应歌曲图片旋转
歌曲播放时有歌曲名称的轮播
点击图片也能进行歌曲控制
隐藏控制区

注意

记得将歌曲，及图片替换路劲

}else{
$("#btns").animate({left: ‘-680px’}, “slow”);
$("#shrink").css(“background-position”,"-22px -12px");
flagshrink=true;

			}
		
		}

	</script>




 界面图

[外链图片转存中...(img-cPh7t18M-1566997179406)]

## 功能

> 1. 点击按钮播放，对应歌曲图标旋转
> 2. 点击上一首/下一首，对应歌曲播放，对应歌曲图片旋转
> 3. 歌曲播放时有歌曲名称的轮播
> 4. 点击图片也能进行歌曲控制
> 5. 隐藏控制区

## 注意

记得将歌曲，及图片替换路劲