【javascript动画之圆形运动】环绕鼠标运动作小球(兼容ie,ff,chrome,……)

原创文章，转载请注明出处：http://www.cnblogs.com/airy/

 

效果看鼠标的周围吧！！

 

代码如下：

 

<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 = e.clientX + document.documentElement.scrollLeft;
        y = e.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>