修改

css/style.css

@@ -103,13 +103,13 @@ input, textarea, select {
 .dancing-down{
 	animation:dancing-down 2s linear infinite forwards;
 }
-.dancing-Wobble{
+.dancing-wobble{
 	animation:dancing-Wobble 1s linear infinite forwards;
 }
-.dancing-Wobble-right{
+.dancing-wobble-right{
 	animation:dancing-Wobble-right 1s linear infinite forwards;
 }
-.dancing-UP{
+.dancing-up{
 	animation:dancing-UP 1s linear infinite forwards;
 }
 /*人物行走*/
@@ -258,7 +258,7 @@ body{
 	padding: 0 10px;
 	border: 2px solid #000000;
 	z-index: 9;
-	min-width:80px;
+	min-width:160px;
 }
 .speak::after{
 	background: url(../image/icon_04.png) no-repeat;
@@ -279,6 +279,7 @@ body{
 	background: #ff0084;
 	color: #FFFFFF;
 	margin: -78px auto 0;
+	display: none;
 }
 .speak.speak-pink::after{
 	background: url(../image/icon_03.png) no-repeat;

dancing.html

@@ -39,14 +39,12 @@
 				<img src="image/icon_02.png" />
 			</div>
 			<div class="leading">
-				<div class="speak speak-pink">
+				<div class="speak speak-pink"></div>
-					一起：起来嗨！
+				<div class="leading-dancer dancing-wobble-right">
-				</div>
-				<div class="leading-dancer dancing-Wobble-right">
 				</div>
 				<div class="table">
 					<img src="image/icon_01.png" />
-					<p class="name">当前领舞：9527</p>
+					<p class="name">当前领舞：<span class="lingname"></span></p>
 				</div>
 			</div>
 		</div>
@@ -56,9 +54,9 @@
 				<p>送任意电池可获得荧光棒！<br />
				大航海排名前三可成为领舞!<br />
				领舞特权：切歌，镜头，统一动作”跳跃，旋转，向左，向右，向左抖腿，向右抖腿”，
				一起喊“任意文字”
 				</p>
 			</div> -->
-			<div class="list">
+			<!-- <div class="list">
 				<p>1：最炫民族风</p>
				<p>2：爱情买卖</p>
				<p>3：两只蝴蝶</p>
-			</div>
+			</div> -->
 		</div>
 		<!--舞池-->
 		

js/custom.js

@@ -8,7 +8,7 @@ var nameArr = ['鹅鹅鹅鹅鹅鹅','打嗝','旋风腿儿','霹雳腿儿','老
 // 粉丝说的话
 var sayArr = ['没人','内容','空空风','美女姐姐','小阔爱','老阔爱'];
 // 动作
-var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-UP','dancing-Wobble','dancing-Wobble-right'];
+var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-up','dancing-wobble','dancing-wobble-right'];
 // 人物位移动画
 var moveArr = ['run-right','run-left','run-right-top','run-left-top','run-right-bottom','run-left-bottom'];
 var peopleId = 0;
@@ -18,20 +18,39 @@ var winWidth = $(window).width();
 var winheight = $(window).height();
 //控制速度1px
 var speed = 1;
+var upTimer = null,downTimer = null,leftTimer = null,rightTimer = null;
+var suiDanTimer = null;
+var startIndex = 0;
 // 集体舞
-function allDancing(){
+function allDancing(dangcing){
+	if(dangcing!=''){
+		clearInterval(upTimer);
+		clearInterval(downTimer);
+		clearInterval(leftTimer);
+		clearInterval(rightTimer);
 		actionArr.forEach((item,index)=>{
-		var chooseIdex = Math.floor(Math.random()*num);
 			var haveDan = $(`.people-img`).is(`.${item}`);
 			if(haveDan){
 				$(`.people-img`).removeClass(item);
-			$(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
+				// $(`.people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
+				$(`.people-img`).addClass(dangcing);
 			}
 		})
 		setTimeout(()=>{
 			console.log('关闭集体舞');
 			clearInterval(actionTimer);
+			startIndex = 0;
+			var allPeople = $('.dance-floor').find('.people-img').length;
+			suiDanTimer = setInterval(()=>{
+				if(startIndex==allPeople){
+					clearInterval(suiDanTimer);
+				} else {
+					startIndex++;
+					$(`.data${startIndex} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
+				}
 			},3000)
+		},3000)
+	}
 }
 // 随机舞
 function randomDancing(id){
@@ -68,7 +87,7 @@ function moveEv(id){
 }
 // 上
 function upMove(obj){
-	var upTimer = setInterval(()=>{
+	upTimer = setInterval(()=>{
 		if(obj.offsetTop < 100){
 			clearInterval(upTimer);
 			downMove(obj);
@@ -79,7 +98,7 @@ function upMove(obj){
 }
 // 下
 function downMove(obj){
-	var downTimer = setInterval(()=>{
+	downTimer = setInterval(()=>{
 		if(obj.offsetTop > 500){
 			clearInterval(downTimer);
 			upMove(obj);
@@ -90,7 +109,7 @@ function downMove(obj){
 }
 // 左
 function leftMove(obj){
-	var leftTimer = setInterval(()=>{
+	leftTimer = setInterval(()=>{
 		if(obj.offsetLeft > 1500){
 			clearInterval(leftTimer);
 			rightMove(obj);
@@ -101,7 +120,7 @@ function leftMove(obj){
 }
 // 左
 function rightMove(obj){
-	var rightTimer = setInterval(()=>{
+	rightTimer = setInterval(()=>{
 		if(obj.offsetLeft < 150){
 			clearInterval(rightTimer);
 			leftMove(obj);
@@ -121,6 +140,11 @@ function sayIng(index){
 		closeSay(index);
 	},6000)
 }
+// 退出广场
+function exitEv(id){
+	$(`${id}`).remove();
+}
+// 进入广场
 function peopleObj(name,say,action,move){
 	// 开始说话
 	sayIng(peopleId);
@@ -142,7 +166,7 @@ function peopleObj(name,say,action,move){
 	$.each(yspData, function (commentIndex, comment) {
 			yspHtml += `
 			<div id="peopleId${comment.id}" class="dance-people data${comment.id} " style="top: ${comment.top}; left: ${comment.left};">
-				<div class="speak ">${comment.say}${comment.id}</div>
+				<div class="speak ">${comment.say}</div>
 				<div class="people-img ${comment.peopleImg} ${comment.dancin}">
 					<div class="stick ${comment.ying_guang}"></div>
 					<div class="people-name ">${comment.name}</div>
@@ -151,17 +175,25 @@ function peopleObj(name,say,action,move){
 	});
 	$('.dance-floor').prepend(yspHtml);
 	moveEv(peopleId-1);
+	// 执行退出事件
+	// exitEv(`#peopleId${peopleId-1}`)
 }
 $(function(){
+	// 领舞者随机动效
+	setInterval(()=>{
+		actionArr.forEach((item,index)=>{
+			var haveDan = $(`.leading-dancer`).is(`.${item}`);
+			if(haveDan){
+				$(`.leading-dancer`).removeClass(item);
+				$(`.leading-dancer`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
+			}
+		})
+	},4000)
 	// setTimeout(()=>{
 	// 	console.log('开始集体舞');
 	// 	allDancing();
 	// },50000)
 	// timer = setInterval(()=>{
-		var nameIndex = Math.floor(Math.random()*nameArr.length);
-		var sayIndex = Math.floor(Math.random()*sayArr.length);
-		var actionIndex = Math.floor(Math.random()*actionArr.length);
-		var moveIndex = Math.floor(Math.random()*moveArr.length);
 		// if(num==10){
 		// 	clearInterval(timer);
 		// } else {
@@ -175,14 +207,36 @@ $(function(){
 				processData: false,
 				crossDomain:true,
 				success: (res)=>{
-					if(res.data.length!=0){
+					console.log(res);
-						res.data.forEach((item,index)=>{
+					if(res.data.dm.length!=0){
+						res.data.dm.forEach((item,index)=>{
+							var nameIndex = Math.floor(Math.random()*nameArr.length);
+							var sayIndex = Math.floor(Math.random()*sayArr.length);
+							var actionIndex = Math.floor(Math.random()*actionArr.length);
+							var moveIndex = Math.floor(Math.random()*moveArr.length);
 							peopleObj(item.uname,item.text,actionArr[actionIndex],moveArr[moveIndex]);
 							num++;
 						})
+						$('.lingname').text(res.data.leader.uname);
+						if(res.data.leader.event=='scale-left' || res.data.leader.event=='scale-right' || res.data.leader.event=='scale-bottom-left' || 
+						res.data.leader.event=='scale-bottom-right'){
+							$('.ground-bg').addClass(res.data.leader.event);
+						} else {
+							setTimeout(()=>{
+								console.log(res.data.leader.event);
+								// 显示领舞说话
+								$('.speak-pink').text(res.data.leader.text);
+								$('.speak-pink').fadeIn();
+								setTimeout(()=>{//关闭领舞说话
+									$('.speak-pink').fadeOut();
+								},3000) 
+								allDancing(res.data.leader.event);
+							},3000)
+						}
 					}
 				}
 			});
 		// }
 	// },1000)
+	
 })