软件学堂

网游分类软件分类

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

2012-10-23 来源:网络

【实例名称】

跟随鼠标的旋转背景

【实例描述】

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

【实例代码】

<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代码下载

 

上一篇:跟随鼠标的星星JS代码
下一篇:图片跟随鼠标JS代码

相关文章