master
parent
ad9d216b02
commit
59e8a672d6
|
|
@ -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;
|
||||
|
|
|
|||
12
dancing.html
12
dancing.html
|
|
@ -39,14 +39,12 @@
|
|||
<img src="image/icon_02.png" />
|
||||
</div>
|
||||
<div class="leading">
|
||||
<div class="speak speak-pink">
|
||||
一起：起来嗨！
|
||||
</div>
|
||||
<div class="leading-dancer dancing-Wobble-right">
|
||||
<div class="speak speak-pink"></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>
|
||||
<!--舞池-->
|
||||
|
||||
|
|
|
|||
104
js/custom.js
104
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(){
|
||||
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)]);
|
||||
}
|
||||
})
|
||||
setTimeout(()=>{
|
||||
console.log('关闭集体舞');
|
||||
clearInterval(actionTimer);
|
||||
},3000)
|
||||
function allDancing(dangcing){
|
||||
if(dangcing!=''){
|
||||
clearInterval(upTimer);
|
||||
clearInterval(downTimer);
|
||||
clearInterval(leftTimer);
|
||||
clearInterval(rightTimer);
|
||||
actionArr.forEach((item,index)=>{
|
||||
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(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){
|
||||
res.data.forEach((item,index)=>{
|
||||
console.log(res);
|
||||
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)
|
||||
|
||||
})
|
||||
Loading…
Reference in New Issue