JS实现弹性势能效果(弹力球效果[实现插件封装])
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>弹性势能动画(弹力球效果)</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; font-size: 30px; text-align: center; line-height: 100px; background-color: greenyellow; border-radius: 50%; cursor: move; user-select: none; } </style> </head> <body> <div id="box">弹</div> <script type="text/javascript"> var oDiv = document.getElementById('box'); oDiv.addEventListener('mousedown', down, false); function down(e) { this.startX = e.clientX; this.startY = e.clientY; this.startL = this.offsetLeft; this.startT = this.offsetTop; var _this = this; this.MOVE = function (e) { move.call(_this, e); }; this.UP = function (e) { up.call(_this); }; document.addEventListener('mousemove', this.MOVE, false); document.addEventListener('mouseup', this.UP, false); window.clearInterval(this.flyTimer); window.clearInterval(this.dropTimer); } function move(e) { var curL = e.clientX - this.startX + this.startL, curT = e.clientY - this.startY + this.startT; var minL = 0, minT = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth, maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight; curL = curL < minL ? minL : (curL > maxL ? maxL : curL); curT = curT < minT ? minT : (curT > maxT ? maxT : curT); this.style.left = curL + 'px'; this.style.top = curT + 'px'; if (!this.pre) { this.pre = this.offsetLeft; } else { this.speedFly = this.offsetLeft - this.pre; this.pre = this.offsetLeft; } } function up() { document.removeEventListener('mousemove', this.MOVE, false); document.removeEventListener('mouseup', this.UP, false); fly.call(this); drop.call(this); } function fly() { var _this = this; _this.flyTimer = setInterval(function () { if (Math.abs(_this.speedFly) < 0.5) { clearInterval(_this.flyTimer); return; } _this.speedFly *= 0.98; var curL = _this.offsetLeft + _this.speedFly; var minL = 0, maxL = (document.documentElement.clientWidth || document.body.clientWidth) - _this.offsetWidth; if (curL <= minL) { _this.style.left = 0; _this.speedFly *= -1; } else if (curL >= maxL) { _this.style.left = maxL + 'px'; _this.speedFly *= -1; } else { _this.style.left = curL + 'px'; } }, 10); } function drop() { var _this = this; _this.dropFlag = 0; _this.dropTimer = setInterval(function () { if (_this.dropFlag > 1) { clearInterval(_this.dropTimer); return; } !_this.dropSpeed ? _this.dropSpeed = 10 : _this.dropSpeed += 10; _this.dropSpeed *= 0.98; var curT = _this.offsetTop + _this.dropSpeed; var maxT = (document.documentElement.clientHeight || document.body.clientHeight) - _this.offsetHeight; if (curT >= maxT) { _this.style.top = maxT + 'px'; _this.dropSpeed *= -1; _this.dropFlag++; } else { _this.style.top = curT + 'px'; _this.dropFlag = 0; } }, 10); } </script> </body> </html>
万人中央,我孤独的漂亮。