javascript动画之圆形运动,环绕鼠标运动作小球

287 阅读 0 评论 190 点赞

我是靠谱客的博主花痴茉莉，最近开发中收集的这篇文章主要介绍javascript动画之圆形运动,环绕鼠标运动作小球，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

代码如下：

复制代码代码如下:

 
<script type="text/javascript"> 
var ball; 
var mouseX = 100; 
var mouseY = 100; 
var angle = 0; 
var radius = 50; 

function run(){ 
if(ball === undefined){ 
ball = document.createElement("span"); 
ball.style.position = "absolute"; 
ball.style.color = "#FF0000"; 
ball.style.zIndex = 999999999; 
ball.innerHTML = "●"; 
document.body.appendChild(ball); 
} 

ball.style["left"] = mouseX+(Math.cos(angle)*radius) + "px"; 
ball.style["top"] = mouseY+(Math.sin(angle)*radius) + "px"; 
angle+=0.1; 
} 
function MousePos(e) 
{ 
e = e || window.event; 
var x,y; 
if(!document.all){ 
x = e.pageX; 
y = e.pageY; 
} 
else{ 
x = event.clientX + document.documentElement.scrollLeft; 
y = event.clientY + document.documentElement.scrollTop; 
} 
return {x:x,y:y}; 
} 
function setXY(e) 
{ 
e = e || window.event; 
var pos = MousePos(e); 
mouseX = pos.x; 
mouseY = pos.y; 
} 
window.onload = function(){ 
setInterval(run,20); 

document.documentElement.onmousemove = function(e){ 
e = e || window.event; 
setXY(e); 
}; 
} 
</script> 