html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js抛物动画</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
html, body {
height: 100%;
overflow: hidden;
}
#box1, #box2, #box3 {
position: absolute;
width: 150px;
height: 150px;
cursor: move;
z-index: 0;
}
#box1 {
top: 100px;
left: 100px;
background: lightcoral;
}
#box2 {
top: 200px;
left: 400px;
background: lightgreen;
}
#box3 {
top: 50px;
left: 50px;
background: orange;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script src="js/subscribe.js"></script>
<script src="js/drag.js"></script>
<script>
let drag1 = new Drag(box1),
drag2 = new Drag(box2),
drag3 = new Drag(box3);
let change = function change(curEle) {
let divs = document.querySelectorAll("div");
[].forEach.call(divs, function (item) {
item.style.zIndex = 0;
});
curEle.style.zIndex = 1;
};
drag1.subDown.add(change);
drag2.subDown.add(change);
drag3.subDown.add(change);
let computedFly = function computedFly(curEle) {
if (!curEle.lastFly) {
curEle.lastFly = curEle.offsetLeft;
curEle.speedFly = 0;
return;
}
curEle.speedFly = curEle.offsetLeft - curEle.lastFly;
curEle.lastFly = curEle.offsetLeft;
}
drag1.subMove.add(computedFly);
drag2.subMove.add(computedFly);
drag3.subMove.add(computedFly);
let stopAnimate = function stopAnimate(curEle) {
clearInterval(curEle.flyTimer);
curEle.speedFly = undefined;
clearInterval(curEle.dropTimer);
};
drag1.subDown.add(stopAnimate);
drag2.subDown.add(stopAnimate);
drag3.subDown.add(stopAnimate);
let animateFly = function animateFly(curEle) {
let minL = 0,
maxL = document.documentElement.clientWidth - curEle.offsetWidth;
let speed = curEle.speedFly,
dir = "right";
speed < 0 ? dir = "left" : null;
speed = Math.abs(speed);
curEle.flyTimer = setInterval(() => {
if (speed < 0.5) {
clearInterval(curEle.flyTimer);
return;
}
speed *= 0.98;
let curL = curEle.offsetLeft;
if (dir === "right") {
if (curL >= maxL) {
curEle.style.left = maxL + "px";
dir = "left";
return;
}
curL += speed;
} else {
if (curL < minL) {
curEle.style.left = minL + "px";
dir = "right";
return;
}
curL -= speed;
}
curEle.style.left = curL + "px";
}, 17);
}
drag1.add(animateFly);
drag2.add(animateFly);
drag3.add(animateFly);
let animateDrop = function animateDrop(curEle) {
let speed = 9.8,
minT = 0,
maxT = document.documentElement.clientHeight - curEle.offsetHeight,
flag = 0;
curEle.dropTimer = setInterval(() => {
if (flag > 1) {
clearInterval(curEle.dropTimer);
return;
}
speed +=10;
speed-=0.98;
let curT = curEle.offsetTop;
curT+=speed;
if(curT>=maxT){
curEle.style.top=maxT+"px";
speed*=-1;
flag++;
return;
}
if(curT<=minT){
curEle.style.top=minT+"px";
speed*=-1;
return;
}
curEle.style.top =curT+"px";
flag =0;
}, 17)
}
drag1.add(animateDrop);
drag2.add(animateDrop);
drag3.add(animateDrop);
</script>
</body>
</html>subscribe.js~function anonymous(window) {
class Subscribe {
constructor() {
this.pond = [];
}
add(fn) {
let pond = this.pond,
isExist = false;
pond.forEach(item=>item === fn ? isExist = true : null);
!isExist ? pond.push(fn) : null;
}
remove(fn) {
let pond = this.pond;
pond.forEach((item,index)=>{
if (item===fn){
pond[index]=null;
}
})
}
fire(...arg) {
let pond = this.pond;
for(let i=0;i<pond.length;i++){
let item=pond[i];
if (item===null){
pond.splice(i,1);
i--;
continue;
}
item(...arg);
}
}
}
window.Subscribe = Subscribe;
}(window);drag.js~function anonymous() {
if (typeof Subscribe==='undefined') {{
throw new ReferenceError("不能没有订阅工具插件");
}
}
class Drag extends Subscribe {
constructor(ele) {
super();
this.ele = ele;
['strX', 'strY', 'strL', 'strT', 'curL', 'curT'].forEach(item=> {
this[item] = null;
});
this.subDown = new Subscribe;
this.subMove = new Subscribe;
this.DOWN = this.down.bind(this);
this.ele.addEventListener('mousedown', this.DOWN);
}
down(ev) {
ev.preventDefault();
let ele = this.ele;
this.strX = ev.clientX;
this.strY = ev.clientY;
this.strL = ele.offsetLeft;
this.strT = ele.offsetTop;
this.MOVE = this.move.bind(this);
this.UP = this.up.bind(this);
document.addEventListener('mousemove', this.MOVE);
document.addEventListener('mouseup', this.UP);
this.subDown.fire(ele,ev);
}
move(ev) {
ev.preventDefault();
let ele = this.ele;
this.curL = ev.clientX - this.strX + this.strL;
this.curT = ev.clientY - this.strY + this.strT;
ele.style.left = this.curL + "px";
ele.style.top = this.curT + "px";
this.subMove.fire(ele,ev);
}
up(ev) {
ev.preventDefault();
document.removeEventListener('mousemove', this.MOVE);
document.removeEventListener('mouseup', this.UP);
this.fire(this.ele,ev);
}
}
window.Drag = Drag;
}();这个demo有个bug: 就是在下坠抛物期间 长按鼠标捕获移动中的元素时. 鼠标按下并移动快的时候,有时候会出现一个"禁止"的鼠标指针. 然后这个元素在按下鼠标时就跟鼠标黏贴住了.抬起鼠标后这个元素会不停的上下高速移动,按下鼠标后,又黏贴鼠标.并且如果多试几遍去操作另外那两个元素的话.另外那两个元素也会出现同样的bug现象,同时黏住鼠标,撒开鼠标就上下高速运动. 请帮忙看看什么问题,谢谢!!
添加回答
举报
0/150
提交
取消