html
js抛物动画 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; }
<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(curTitem === 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 { 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现象,同时黏住鼠标,撒开鼠标就上下高速运动. 请帮忙看看什么问题,谢谢!! |
天盟APP下载
