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現象,同時黏住鼠標,撒開鼠標就上下高速運動. 請幫忙看看什么問題,謝謝!!
拖拽拋物動畫bug怎么解決?
天天向上學
2019-03-17 23:52:37