diff --git a/css/animate.css b/css/animate.css
index 519fb3d..e89a599 100644
--- a/css/animate.css
+++ b/css/animate.css
@@ -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);
- }
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 9ac9019..2d51d15 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
diff --git a/dancing.html b/dancing.html
index 1782691..d5fdcc8 100644
--- a/dancing.html
+++ b/dancing.html
@@ -62,84 +62,85 @@
-
-
-
diff --git a/js/custom.js b/js/custom.js
index 32b9a34..8b2c87f 100644
--- a/js/custom.js
+++ b/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 += `
-