案例-重力的弹弹球

来源：互联网发布：北大历史系考研知乎编辑：程序博客网时间：2024/04/29 18:08
仅一个文件
直接看源码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>重力的弹弹球</title><style>#login{position:absolute;left:100px;top:0px;width:100px;height:100px;background:blue;border-radius:50%;cursor:pointer;box-shadow:0px 0px 22px #000;}</style></head><body><div id="login"></div><script>window.onload = function(){var oLogin = document.getElementById('login');var timer = null,speedX = 0,speedY = 0;oLogin.onmousedown = function(e){var e = e || window.event;//获取event对象 兼容ieclearInterval(timer);var x = e.clientX,y = e.clientY,disX = x - oLogin.offsetLeft,disY = y - oLogin.offsetTop;document.onmousemove = function(e){var e = e || window.event;oLogin.style.left = e.clientX - disX +'px';//获取新的left值oLogin.style.top = e.clientY - disY + 'px';speedY = e.clientY - y;speedX = e.clientX -x;y = e.clientY;//当前坐标值在下一次就会变成上一次的值x = e.clientX;}document.onmouseup = function(e){document.onmousemove = null;document.onmouseup = null;startMove();}}startMove();function startMove(){clearInterval(timer);timer = setInterval(function(){speedY += 2;//垂直降落的速度；speedX *= 0.98;//惯性速度 慢慢变小var T = oLogin.offsetTop + speedY;t = document.documentElement.clientHeight - oLogin.offsetHeight,L = oLogin.offsetLeft + speedX,l = document.documentElement.clientWidth - oLogin.offsetWidth;if(T > t){T = t;speedY *= -1;//速度反方向speedY *= 0.75;//反弹后速度变慢}else if(T<0){T = 0;speedY *= -1;speedY *= 0.75;}if(L > l){L = l;speedX *= -1;}else if(L < 0){L = 0;speedX *= -1;}oLogin.style.top = T +'px';oLogin.style.left = L +'px';},13)}}</script></body></html>
阅读全文
0 0