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”。
【源码下载】