<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: orange; cursor: pointer; border-radius: 50%; } </style> </head> <body> <div id="demo"></div> <script> var oDiv = document.getElementById('demo'); var lastX = 0; var lastY = 0; var iSpeedX = 0; var iSpeedY = 0; oDiv.onmousedown = function(e){ clearInterval(this.timer); var event = event || e; var disX = event.clientX - this.offsetLeft; var disY = event.clientY - this.offsetTop; var self = this; document.onmousemove = function(e){ var event = event || e; var newLeft = event.clientX - disX; var newTop = event.clientY - disY; iSpeedX = newLeft - lastX; iSpeedY = newTop - lastY; lastX = newLeft; lastY = newTop; // var oSpan = document.createElement('span'); // oSpan.style.position = 'absolute'; // oSpan.style.left = newLeft + 'px'; // oSpan.style.top = newTop + 'px'; // oSpan.style.width = '5px'; // oSpan.style.height = '5px'; // oSpan.style.background = 'black'; // document.body.appendChild(oSpan); self.style.left = newLeft + 'px'; self.style.top = newTop + 'px'; } document.onmouseup = function(){ document.onmouseup = null; document.onmousemove = null; startMove(self,iSpeedX,iSpeedY); } } function startMove(dom,iSpeedX,iSpeedY){ clearInterval(dom.timer); var iSpeedX = 8; var iSpeedY = 10; var g = 3; dom.timer = setInterval(function(){ iSpeedY += g; var newTop = dom.offsetTop + iSpeedY; var newLeft = dom.offsetLeft + iSpeedX; if (newTop >= document.documentElement.clientHeight - dom.offsetHeight){ iSpeedY *= -1; iSpeedX *= 0.8; iSpeedY *= 0.8; newTop = document.documentElement.clientHeight - dom.offsetHeight; } if(newTop <= 0){ iSpeedY *= -1; iSpeedX *= 0.8; iSpeedY *= 0.8; newTop = 0; } if (newLeft >= document.documentElement.clientWidth - dom.offsetWidth){ iSpeedY *= -1; iSpeedX *= 0.8; iSpeedY *= 0.8; newLeft >= document.documentElement.clientWidth - dom.offsetWidth; } if(newLeft <=0){ iSpeedX *= -1; iSpeedX *= 0.8; iSpeedY *= 0.8; newLeft = 0; } if(iSpeedX < 1 &&iSpeedY < 1 && newTop == document.documentElement.clientHeight - dom.offsetHeight){ iSpeedX = 0; iSpeedY = 0; clearInterval(dom.timer); } dom.style.top = newTop + "px"; dom.style.left = newLeft + "px"; },30); } </script> </body> </html>
js拖拽运动加模拟重力抛出小球
最新推荐文章于 2024-08-15 10:08:16 发布
本文详细介绍了如何使用HTML和JavaScript实现在网页上的元素随鼠标移动而平滑移动,并探讨了速度控制和边界限制的实现。通过定时器和事件处理,作者展示了如何为鼠标释放后的元素创建一个减速并停止的动画效果。
摘要由CSDN通过智能技术生成