新增随机移动
parent
76cec146a0
commit
e483ff4d7d
|
|
@ -544,68 +544,3 @@
|
|||
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;
|
||||
}
|
||||
/*舞池*/
|
||||
.dance-floor{
|
||||
width:100% ;
|
||||
.dance-floor-box{
|
||||
position: fixed;
|
||||
left: 150px;
|
||||
width:calc(100% - 300px);
|
||||
height: calc(100vh - 410px);
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
z-index: 9999;
|
||||
}
|
||||
.dance-floor{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* animation: scale-body .4s linear infinite; */
|
||||
}
|
||||
.dance-people{
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
/* display: inline-flex; */
|
||||
}
|
||||
.dance-people .people-img{
|
||||
width: 90px;
|
||||
|
|
|
|||
137
dancing.html
137
dancing.html
|
|
@ -62,84 +62,85 @@
|
|||
</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-->
|
||||
<div class="dance-floor">
|
||||
<!-- <div class="dance-people" style="top: 40%; left: 50%;">
|
||||
<div class="people-img people-img02 dancing-UP">
|
||||
<div class="stick stick-02">
|
||||
<div class="dance-floor-box">
|
||||
<div class="dance-floor">
|
||||
<!-- <div class="dance-people" style="top: 40%; left: 50%;">
|
||||
<div class="people-img people-img02 dancing-UP">
|
||||
<div class="stick stick-02">
|
||||
|
||||
</div>
|
||||
<div class="people-name">
|
||||
内有猛犬小心
|
||||
</div>
|
||||
</div>
|
||||
<div class="people-name">
|
||||
内有猛犬小心
|
||||
</div> -->
|
||||
<!-- <div class="dance-people" style="top: 30%; left: 20%;">
|
||||
<div class="speak ">
|
||||
切歌，镜头，统一动作”跳跃，旋转，向左，向右”，
|
||||
</div>
|
||||
</div>
|
||||
</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 class="people-img people-img01 dancing-left">
|
||||
<div class="stick stick-01 ">
|
||||
|
||||
</div>
|
||||
<div class="people-name ">
|
||||
内有猛犬小心
|
||||
</div>
|
||||
<div class="people-name ">
|
||||
内有猛犬小心
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dance-people" style="top: 40%; left: 50%;">
|
||||
<div class="people-img people-img02 dancing-down">
|
||||
<div class="stick stick-02">
|
||||
|
||||
</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>
|
||||
<div class="dance-people" style="top: 40%; left: 50%;">
|
||||
<div class="people-img people-img02 dancing-down">
|
||||
<div class="stick stick-02">
|
||||
<!--舞池 end-->
|
||||
|
||||
</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>
|
||||
<!--小纸片氛围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 peopleId = 0;
|
||||
// 窗体宽度
|
||||
var winWidth = $(window).width();
|
||||
// 窗体高度
|
||||
var winheight = $(window).height();
|
||||
//控制速度1px
|
||||
var speed = 1;
|
||||
// 集体舞
|
||||
function allDancing(){
|
||||
actionArr.forEach((item,index)=>{
|
||||
|
|
@ -42,36 +48,67 @@ function randomDancing(id){
|
|||
}
|
||||
// 随机位移
|
||||
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);
|
||||
var odiv = document.getElementById(`peopleId${id}`);
|
||||
var typeMove = Math.floor(Math.random()*4);
|
||||
switch (typeMove){
|
||||
case 0:
|
||||
upMove(odiv);
|
||||
break;
|
||||
case 1:
|
||||
downMove(odiv);
|
||||
break;
|
||||
case 2:
|
||||
leftMove(odiv);
|
||||
break;
|
||||
case 3:
|
||||
rightMove(odiv);
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
// 上
|
||||
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){
|
||||
|
|
@ -88,13 +125,13 @@ function peopleObj(name,say,action,move){
|
|||
// 开始说话
|
||||
// sayIng(peopleId);
|
||||
randomDancing(peopleId);
|
||||
// moveEv(peopleId);
|
||||
closeSay(num);
|
||||
let yspHtml = '';
|
||||
let yspData = [
|
||||
{
|
||||
id:peopleId++,
|
||||
top:`${Math.random()*80+1}%`,
|
||||
left:`${Math.random()*90+1}%`,
|
||||
top:`${Math.random()*500}px`,
|
||||
left:`${Math.random()*1500}px`,
|
||||
name:name,//用户名
|
||||
say:say,//说话内容
|
||||
peopleImg:`people-img0${Math.floor(Math.random()*6+1)}`,//人物图片
|
||||
|
|
@ -105,7 +142,7 @@ function peopleObj(name,say,action,move){
|
|||
]
|
||||
$.each(yspData, function (commentIndex, comment) {
|
||||
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="people-img ${comment.peopleImg} ${comment.dancin}">
|
||||
<div class="stick ${comment.ying_guang}"></div>
|
||||
|
|
@ -114,27 +151,39 @@ function peopleObj(name,say,action,move){
|
|||
</div>`
|
||||
});
|
||||
$('.dance-floor').prepend(yspHtml);
|
||||
setTimeout(()=>{
|
||||
// closeSay(num);
|
||||
moveEv(0);
|
||||
},3000);
|
||||
moveEv(peopleId-1);
|
||||
}
|
||||
$(function(){
|
||||
// setTimeout(()=>{
|
||||
// console.log('开始集体舞');
|
||||
// allDancing();
|
||||
// },50000)
|
||||
timer = setInterval(()=>{
|
||||
// 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);
|
||||
num++;
|
||||
if(num==200){
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
|
||||
}
|
||||
},0)
|
||||
|
||||
// if(num==10){
|
||||
// clearInterval(timer);
|
||||
// } else {
|
||||
// peopleObj(nameArr[nameIndex],sayArr[sayIndex],actionArr[actionIndex],moveArr[moveIndex]);
|
||||
// num++;
|
||||
$.ajax({
|
||||
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