跟隨鼠標(biāo)的旋轉(zhuǎn)背景JS代碼

【實(shí)例名稱】

跟隨鼠標(biāo)的旋轉(zhuǎn)背景

【實(shí)例描述】

鼠標(biāo)在頁面中移動(dòng)的時(shí)候，會(huì)一直有一個(gè)旋轉(zhuǎn)的橢圓點(diǎn)跟隨它。本例學(xué)習(xí)如何實(shí)現(xiàn)這種效果。

【實(shí)例代碼】

<SCRIPT LANGUAGE="JavaScript">
    var Clrs = new Array(6);                         
//隨機(jī)的背景顏色，保存在一個(gè)數(shù)組中
    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;                                      
//橫坐標(biāo)變量
    var Ypos = 1;                                      
//縱坐標(biāo)變量
    if (document.all) {
        function MoveHandler() 
        {
            Xpos = document.body.scrollLeft+event.x;   
//設(shè)置橫坐標(biāo)
            Ypos = document.body.scrollTop+event.y;    
//設(shè)置縱坐標(biāo)
        }
        document.onmousemove = MoveHandler;            
//綁定鼠標(biāo)的移動(dòng)事件
    }
    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++ ) {    
//循環(huán)設(shè)置每個(gè)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]);              
//獲取隨機(jī)的一個(gè)顏色值
        }
        starsDiv.all[i].style.background = Clrs[c];        
//動(dòng)態(tài)設(shè)置div的背景色
           }
        }
        currStep += step;
        setTimeout("Comet()", 5);                          
//設(shè)置定時(shí)器-實(shí)現(xiàn)旋轉(zhuǎn)效果
    } 
    Comet();
</script>
 

【運(yùn)行效果】

【難點(diǎn)剖析】

本例的重點(diǎn)是旋轉(zhuǎn)背景所在的層。跟隨鼠標(biāo)的旋轉(zhuǎn)背景由多個(gè)不同顏色的點(diǎn)組成，其中每個(gè)點(diǎn)是一個(gè)層(div)，每個(gè)層的顏色不同。這些層的位置通過鼠標(biāo)的坐標(biāo)獲取，此處要注意層的位置使用“position：relative”，表示相對(duì)坐標(biāo)，其坐標(biāo)的原始點(diǎn)是這些層的父級(jí)節(jié)點(diǎn)“starsDiv”。

【源碼下載】

本實(shí)例JS代碼下載