跟随鼠标的旋转背景JS代码

【实例名称】

跟随鼠标的旋转背景

【实例描述】

鼠标在页面中移动的时候，会一直有一个旋转的椭圆点跟随它。本例学习如何实现这种效果。

【实例代码】

<SCRIPT LANGUAGE="JavaScript">
    var Clrs = new Array(6);                         
//随机的背景颜色，保存在一个数组中
    Clrs[0] = 'ff0000';
    Clrs[1] = '00ff00';
    Clrs[2] = '000aff';
    Clrs[3] = 'ff00ff';
    Clrs[4] = 'fff000';
    Clrs[5] = 'fffff0';
    var yBase = 200;
    var xBase = 200;
    var step;
    var currStep = 0;
    var Xpos = 1;                                      
//横坐标变量
    var Ypos = 1;                                      
//纵坐标变量
    if (document.all) {
        function MoveHandler() 
        {
            Xpos = document.body.scrollLeft+event.x;   
//设置横坐标
            Ypos = document.body.scrollTop+event.y;    
//设置纵坐标
        }
        document.onmousemove = MoveHandler;            
//绑定鼠标的移动事件
    }
    function Comet() 
    {
        if (document.all) {
        yBase = window.document.body.offsetHeight / 4;
        xBase = window.document.body.offsetWidth / 4;
        }
        if (document.all) {
        for ( i = 0 ; i < starsDiv.all.length ; i++ ) {    
//循环设置每个div的显示位置
        step = 3;
        starsDiv.all[i].style.top = Ypos + 
yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
        starsDiv.all[i].style.left = Xpos + 
xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
        for (ai = 0; ai < Clrs.length; ai++) {
        var c=Math.round(Math.random()*[ai]);              
//获取随机的一个颜色值
        }
        starsDiv.all[i].style.background = Clrs[c];        
//动态设置div的背景色
           }
        }
        currStep += step;
        setTimeout("Comet()", 5);                          
//设置定时器-实现旋转效果
    } 
    Comet();
</script>
 

【运行效果】

【难点剖析】

本例的重点是旋转背景所在的层。跟随鼠标的旋转背景由多个不同颜色的点组成，其中每个点是一个层(div)，每个层的颜色不同。这些层的位置通过鼠标的坐标获取，此处要注意层的位置使用“position：relative”，表示相对坐标，其坐标的原始点是这些层的父级节点“starsDiv”。

【源码下载】

本实例JS代码下载