master
parent
883c6cfb10
commit
ca20a2bc53
68
js/custom.js
68
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,12 +128,13 @@ $(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)
|
||||
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue