移动

js/custom.js

@@ -2,12 +2,15 @@
 var num = 0;
 var timer = null;
 var actionTimer = null;
+var moveTimer = null;
 // 粉丝的昵称
 var nameArr = ['鹅鹅鹅鹅鹅鹅','打嗝','旋风腿儿','霹雳腿儿','老寒腿儿','哇咔咔蹦跶'];
 // 粉丝说的话
 var sayArr = ['没人','内容','空空风','美女姐姐','小阔爱','老阔爱'];
 // 动作
 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;
 // 集体舞
 function allDancing(){
@@ -27,17 +30,6 @@ function allDancing(){
 // 随机舞
 function randomDancing(id){
 	actionTimer = setInterval(()=>{
-		// var len = $('.dance-people').length;
-		// for (var i = 0; i < num; i++) {
-		// 	actionArr.forEach((item,index)=>{
-		// 		// var chooseIdex = Math.floor(Math.random()*num);
-		// 		var haveDan = $(`.data${i} .people-img`).is(`.${item}`);
-		// 		if(haveDan){
-		// 			$(`.data${i} .people-img`).removeClass(item);
-		// 			$(`.data${i} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
-		// 		}
-		// 	})
-		// }
 		actionArr.forEach((item,index)=>{
 			// var chooseIdex = Math.floor(Math.random()*num);
 			var haveDan = $(`.data${id} .people-img`).is(`.${item}`);
@@ -46,9 +38,41 @@ function randomDancing(id){
 				$(`.data${id} .people-img`).addClass(actionArr[Math.floor(Math.random()*actionArr.length)]);
 			}
 		})
-		console.log(id);
 	},3000)
 }
+// 随机位移
+function moveEv(id){
+	var odiv = document.getElementById("peopleId0");
+	actionTimer = setInterval(()=>{
+		var end = `100% {-webkit-transform:rotate(90deg);opacity:1;}`
+		var s = document.styleSheets[0];
+		moveArr.forEach((item,index)=>{
+			// var chooseIdex = Math.floor(Math.random()*num);
+			var haveDan = $(`.data${id}`).is(`.${item}`);
+			if(haveDan){
+				addCSSRule(document.styleSheets[  0],`@keyframes ${item}`,`0%{transform:translate(${Math.floor(Math.random()*100)}%,${Math.floor(Math.random()*100)}%)}100%{transform:translate(${Math.floor(Math.random()*100)}%,${Math.floor(Math.random()*100)}%)}`,9)
+			}
+		})
+	},5000)
+	// moveTimer = setInterval(()=>{
+	// 	var speed = 1;
+	// 	if(odiv.offsetLeft>=700){
+	// 		clearInterval(moveTimer);
+	// 	} else {
+	// 		odiv.style.left = odiv.offsetLeft+speed+'px';
+	// 	}
+	// },10)
+	// console.log(23);
+}
+// 添加规则
+function addCSSRule(sheet,selector,rules,index){
+	if("insertRule" in sheet){
+		sheet.insertRule(selector+"{"+rules+"}",index);
+		console.log(selector+"{"+rules+"}");
+	}else if("addRule" in sheet){
+		sheet.addRule(selector,rules,index);
+	}
+}
 // 关闭说话
 function closeSay(index){
 	$(`.data${index} .speak`).addClass("dn");
@@ -58,12 +82,13 @@ function sayIng(index){
 	$(`.data${index} .speak`).removeClass("dn");
 	setTimeout(()=>{
 		closeSay(index);
-	},3000)
+	},6000)
 }
-function peopleObj(name,say,action){
+function peopleObj(name,say,action,move){
 	// 开始说话
-	sayIng(peopleId);
+	// sayIng(peopleId);
 	randomDancing(peopleId);
+	// moveEv(peopleId);
 	let yspHtml = '';
 	let yspData = [
 		{
@@ -74,12 +99,13 @@ function peopleObj(name,say,action){
 			say:say,//说话内容
 			peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
 			ying_guang:`stick-0${Math.floor(Math.random()*5+1)}`,//荧光棒
-			dancin:action
+			dancin:action,
+			peopleMove:move
 		}
 	]
 	$.each(yspData, function (commentIndex, comment) {
 			yspHtml += `
-			<div class="dance-people data${comment.id}" style="top: ${comment.top}; left: ${comment.left};">
+			<div id="peopleId${comment.id}" class="dance-people data${comment.id} ${comment.peopleMove}" style="top: ${comment.top}; left: ${comment.left};">
 				<div class="speak ">${comment.say}${comment.id}</div>
 				<div class="people-img ${comment.peopleImg} ${comment.dancin}">
 					<div class="stick ${comment.ying_guang}"></div>
@@ -89,7 +115,8 @@ function peopleObj(name,say,action){
 	});
 	$('.dance-floor').prepend(yspHtml);
 	setTimeout(()=>{
-		closeSay(num);
+		// closeSay(num);
+		moveEv(0);
 	},3000);
 }
 $(function(){
@@ -101,11 +128,12 @@ $(function(){
 		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);
 		num++;
 		if(num==10){
 			clearInterval(timer);
 		} else {
-			peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex]);
+			peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
 		}
 	},000)