新增随机移动
parent
76cec146a0
commit
e483ff4d7d
|
|
@ -544,68 +544,3 @@
|
||||||
transform-origin:22px 60px;
|
transform-origin:22px 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*人物行走*/
|
|
||||||
@keyframes run-right-bottom{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(300px,100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-left-bottom{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(-300px,100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-right-top{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(300px,-100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-left-top{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(-300px,-100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-right{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(300px,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-left{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(-300px,0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-top{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(0px,-100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes run-bottom{
|
|
||||||
from{
|
|
||||||
transform:translate(0,0);
|
|
||||||
}
|
|
||||||
to{
|
|
||||||
transform:translate(0px,100px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -304,17 +304,22 @@ body{
|
||||||
-webkit-text-stroke: 0.5px black;
|
-webkit-text-stroke: 0.5px black;
|
||||||
}
|
}
|
||||||
/*舞池*/
|
/*舞池*/
|
||||||
.dance-floor{
|
.dance-floor-box{
|
||||||
width:100% ;
|
position: fixed;
|
||||||
|
left: 150px;
|
||||||
|
width:calc(100% - 300px);
|
||||||
height: calc(100vh - 410px);
|
height: calc(100vh - 410px);
|
||||||
position: absolute;
|
z-index: 9999;
|
||||||
left: 0px;
|
}
|
||||||
z-index: 1;
|
.dance-floor{
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
/* animation: scale-body .4s linear infinite; */
|
/* animation: scale-body .4s linear infinite; */
|
||||||
}
|
}
|
||||||
.dance-people{
|
.dance-people{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: inline-flex;
|
/* display: inline-flex; */
|
||||||
}
|
}
|
||||||
.dance-people .people-img{
|
.dance-people .people-img{
|
||||||
width: 90px;
|
width: 90px;
|
||||||
|
|
|
||||||
145
dancing.html
145
dancing.html
|
|
@ -62,84 +62,85 @@
|
||||||
</div>
|
</div>
|
||||||
<!--舞池-->
|
<!--舞池-->
|
||||||
|
|
||||||
<!--当前移动动作：run-right，run-left,run-right-top,run-left-top,run-right-bottom,run-left-bottom-->
|
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
||||||
<!--当前舞池动作： dancing-left, dancing-right,dancing-down,dancing-UP,dancing-Wobble,dancing-Wobble-right-->
|
<div class="dance-floor-box">
|
||||||
<div class="dance-floor">
|
<div class="dance-floor">
|
||||||
<!-- <div class="dance-people" style="top: 40%; left: 50%;">
|
<!-- <div class="dance-people" style="top: 40%; left: 50%;">
|
||||||
<div class="people-img people-img02 dancing-UP">
|
<div class="people-img people-img02 dancing-UP">
|
||||||
<div class="stick stick-02">
|
<div class="stick stick-02">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="people-name">
|
</div> -->
|
||||||
内有猛犬小心
|
<!-- <div class="dance-people" style="top: 30%; left: 20%;">
|
||||||
|
<div class="speak ">
|
||||||
|
切歌，镜头，统一动作”跳跃，旋转，向左，向右”，
|
||||||
|
</div>
|
||||||
|
<div class="people-img people-img01 dancing-left">
|
||||||
|
<div class="stick stick-01 ">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name ">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
<div class="dance-people" style="top: 40%; left: 50%;">
|
||||||
<!-- <div class="dance-people" style="top: 30%; left: 20%;">
|
<div class="people-img people-img02 dancing-down">
|
||||||
<div class="speak ">
|
<div class="stick stick-02">
|
||||||
切歌，镜头，统一动作”跳跃，旋转，向左，向右”，
|
|
||||||
</div>
|
</div>
|
||||||
<div class="people-img people-img01 dancing-left">
|
<div class="people-name">
|
||||||
<div class="stick stick-01 ">
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
</div>
|
|
||||||
<div class="people-name ">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="dance-people" style="top: 20%; left: 40%;">
|
||||||
|
<div class="people-img people-img03 dancing-right">
|
||||||
|
<div class="stick stick-03">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<!-- <div class="dance-people" style="top: 26%; left: 60%;">
|
||||||
|
<div class="people-img people-img04 dancing-UP">
|
||||||
|
<div class="stick stick-04">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 56%; left: 60%;">
|
||||||
|
<div class="people-img people-img05 dancing-Wobble">
|
||||||
|
<div class="stick stick-05">
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dance-people" style="top: 55%; left: 30%;">
|
||||||
|
<div class="people-img people-img06 dancing-Wobble-right">
|
||||||
|
<div class="stick stick-01">
|
||||||
|
</div>
|
||||||
|
<div class="people-name">
|
||||||
|
内有猛犬小心
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="dance-people" style="top: 40%; left: 50%;">
|
<!--舞池 end-->
|
||||||
<div class="people-img people-img02 dancing-down">
|
|
||||||
<div class="stick stick-02">
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="people-name">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dance-people" style="top: 20%; left: 40%;">
|
|
||||||
<div class="people-img people-img03 dancing-right">
|
|
||||||
<div class="stick stick-03">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="people-name">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<!-- <div class="dance-people" style="top: 26%; left: 60%;">
|
|
||||||
<div class="people-img people-img04 dancing-UP">
|
|
||||||
<div class="stick stick-04">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="people-name">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dance-people" style="top: 56%; left: 60%;">
|
|
||||||
<div class="people-img people-img05 dancing-Wobble">
|
|
||||||
<div class="stick stick-05">
|
|
||||||
</div>
|
|
||||||
<div class="people-name">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dance-people" style="top: 55%; left: 30%;">
|
|
||||||
<div class="people-img people-img06 dancing-Wobble-right">
|
|
||||||
<div class="stick stick-01">
|
|
||||||
</div>
|
|
||||||
<div class="people-name">
|
|
||||||
内有猛犬小心
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!--舞池 end-->
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--小纸片氛围js-->
|
<!--小纸片氛围js-->
|
||||||
|
|
|
||||||
141
js/custom.js
141
js/custom.js
|
|
@ -12,6 +12,12 @@ var actionArr = ['dancing-left','dancing-right','dancing-down','dancing-UP','dan
|
||||||
// 人物位移动画
|
// 人物位移动画
|
||||||
var moveArr = ['run-right','run-left','run-right-top','run-left-top','run-right-bottom','run-left-bottom'];
|
var moveArr = ['run-right','run-left','run-right-top','run-left-top','run-right-bottom','run-left-bottom'];
|
||||||
var peopleId = 0;
|
var peopleId = 0;
|
||||||
|
// 窗体宽度
|
||||||
|
var winWidth = $(window).width();
|
||||||
|
// 窗体高度
|
||||||
|
var winheight = $(window).height();
|
||||||
|
//控制速度1px
|
||||||
|
var speed = 1;
|
||||||
// 集体舞
|
// 集体舞
|
||||||
function allDancing(){
|
function allDancing(){
|
||||||
actionArr.forEach((item,index)=>{
|
actionArr.forEach((item,index)=>{
|
||||||
|
|
@ -42,36 +48,67 @@ function randomDancing(id){
|
||||||
}
|
}
|
||||||
// 随机位移
|
// 随机位移
|
||||||
function moveEv(id){
|
function moveEv(id){
|
||||||
var odiv = document.getElementById("peopleId0");
|
var odiv = document.getElementById(`peopleId${id}`);
|
||||||
actionTimer = setInterval(()=>{
|
var typeMove = Math.floor(Math.random()*4);
|
||||||
var end = `100% {-webkit-transform:rotate(90deg);opacity:1;}`
|
switch (typeMove){
|
||||||
var s = document.styleSheets[0];
|
case 0:
|
||||||
moveArr.forEach((item,index)=>{
|
upMove(odiv);
|
||||||
// var chooseIdex = Math.floor(Math.random()*num);
|
break;
|
||||||
var haveDan = $(`.data${id}`).is(`.${item}`);
|
case 1:
|
||||||
if(haveDan){
|
downMove(odiv);
|
||||||
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)
|
break;
|
||||||
}
|
case 2:
|
||||||
})
|
leftMove(odiv);
|
||||||
},5000)
|
break;
|
||||||
// moveTimer = setInterval(()=>{
|
case 3:
|
||||||
// var speed = 1;
|
rightMove(odiv);
|
||||||
// if(odiv.offsetLeft>=700){
|
break;
|
||||||
// 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 upMove(obj){
|
||||||
|
var upTimer = setInterval(()=>{
|
||||||
|
if(obj.offsetTop < 100){
|
||||||
|
clearInterval(upTimer);
|
||||||
|
downMove(obj);
|
||||||
|
} else {
|
||||||
|
obj.style.top = obj.offsetTop-speed+'px';
|
||||||
|
}
|
||||||
|
},10)
|
||||||
|
}
|
||||||
|
// 下
|
||||||
|
function downMove(obj){
|
||||||
|
var downTimer = setInterval(()=>{
|
||||||
|
if(obj.offsetTop > 500){
|
||||||
|
clearInterval(downTimer);
|
||||||
|
upMove(obj);
|
||||||
|
} else {
|
||||||
|
obj.style.top = obj.offsetTop+speed+'px';
|
||||||
|
}
|
||||||
|
},10)
|
||||||
|
}
|
||||||
|
// 左
|
||||||
|
function leftMove(obj){
|
||||||
|
var leftTimer = setInterval(()=>{
|
||||||
|
if(obj.offsetLeft > 1500){
|
||||||
|
clearInterval(leftTimer);
|
||||||
|
rightMove(obj);
|
||||||
|
} else {
|
||||||
|
obj.style.left = obj.offsetLeft+speed+'px';
|
||||||
|
}
|
||||||
|
},10)
|
||||||
|
}
|
||||||
|
// 左
|
||||||
|
function rightMove(obj){
|
||||||
|
var rightTimer = setInterval(()=>{
|
||||||
|
if(obj.offsetLeft < 150){
|
||||||
|
clearInterval(rightTimer);
|
||||||
|
leftMove(obj);
|
||||||
|
} else {
|
||||||
|
obj.style.left = obj.offsetLeft-speed+'px';
|
||||||
|
}
|
||||||
|
},10)
|
||||||
}
|
}
|
||||||
// 关闭说话
|
// 关闭说话
|
||||||
function closeSay(index){
|
function closeSay(index){
|
||||||
|
|
@ -88,13 +125,13 @@ function peopleObj(name,say,action,move){
|
||||||
// 开始说话
|
// 开始说话
|
||||||
// sayIng(peopleId);
|
// sayIng(peopleId);
|
||||||
randomDancing(peopleId);
|
randomDancing(peopleId);
|
||||||
// moveEv(peopleId);
|
closeSay(num);
|
||||||
let yspHtml = '';
|
let yspHtml = '';
|
||||||
let yspData = [
|
let yspData = [
|
||||||
{
|
{
|
||||||
id:peopleId++,
|
id:peopleId++,
|
||||||
top:`${Math.random()*80+1}%`,
|
top:`${Math.random()*500}px`,
|
||||||
left:`${Math.random()*90+1}%`,
|
left:`${Math.random()*1500}px`,
|
||||||
name:name,//用户名
|
name:name,//用户名
|
||||||
say:say,//说话内容
|
say:say,//说话内容
|
||||||
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
||||||
|
|
@ -105,7 +142,7 @@ function peopleObj(name,say,action,move){
|
||||||
]
|
]
|
||||||
$.each(yspData, function (commentIndex, comment) {
|
$.each(yspData, function (commentIndex, comment) {
|
||||||
yspHtml += `
|
yspHtml += `
|
||||||
<div id="peopleId${comment.id}" class="dance-people data${comment.id} ${comment.peopleMove}" style="top: ${comment.top}; left: ${comment.left};">
|
<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}${comment.id}</div>
|
||||||
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
|
<div class="people-img ${comment.peopleImg} ${comment.dancin}">
|
||||||
<div class="stick ${comment.ying_guang}"></div>
|
<div class="stick ${comment.ying_guang}"></div>
|
||||||
|
|
@ -114,27 +151,39 @@ function peopleObj(name,say,action,move){
|
||||||
</div>`
|
</div>`
|
||||||
});
|
});
|
||||||
$('.dance-floor').prepend(yspHtml);
|
$('.dance-floor').prepend(yspHtml);
|
||||||
setTimeout(()=>{
|
moveEv(peopleId-1);
|
||||||
// closeSay(num);
|
|
||||||
moveEv(0);
|
|
||||||
},3000);
|
|
||||||
}
|
}
|
||||||
$(function(){
|
$(function(){
|
||||||
// setTimeout(()=>{
|
// setTimeout(()=>{
|
||||||
// console.log('开始集体舞');
|
// console.log('开始集体舞');
|
||||||
// allDancing();
|
// allDancing();
|
||||||
// },50000)
|
// },50000)
|
||||||
timer = setInterval(()=>{
|
// timer = setInterval(()=>{
|
||||||
var nameIndex = Math.floor(Math.random()*nameArr.length);
|
var nameIndex = Math.floor(Math.random()*nameArr.length);
|
||||||
var sayIndex = Math.floor(Math.random()*sayArr.length);
|
var sayIndex = Math.floor(Math.random()*sayArr.length);
|
||||||
var actionIndex = Math.floor(Math.random()*actionArr.length);
|
var actionIndex = Math.floor(Math.random()*actionArr.length);
|
||||||
var moveIndex = Math.floor(Math.random()*moveArr.length);
|
var moveIndex = Math.floor(Math.random()*moveArr.length);
|
||||||
num++;
|
// if(num==10){
|
||||||
if(num==200){
|
// clearInterval(timer);
|
||||||
clearInterval(timer);
|
// } else {
|
||||||
} else {
|
// peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
|
||||||
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
|
// num++;
|
||||||
}
|
$.ajax({
|
||||||
},0)
|
method: 'get',
|
||||||
|
url: 'https://bili.dothis.top/src/fetch.php',
|
||||||
|
data: '',
|
||||||
|
contentType: false,
|
||||||
|
processData: false,
|
||||||
|
crossDomain:true,
|
||||||
|
success: (res)=>{
|
||||||
|
if(res.data.length!=0){
|
||||||
|
res.data.forEach((item,index)=>{
|
||||||
|
peopleObj(item.uname,item.text,actionArr[actionIndex],moveArr[moveIndex]);
|
||||||
|
num++;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// }
|
||||||
|
// },1000)
|
||||||
})
|
})
|
||||||
Loading…
Reference in New Issue