跟随鼠标的光环

人气：　来源：本站原创　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：也是一个不错的鼠标跟随特效。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_跟随鼠标的光环</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" >
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<SCRIPT LANGUAGE="JavaScript">
ns = (document.layers)?1:0;
Clrs = new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
yBase = 0;
xBase = 0;
step = 3;
currStep = 0;
Ypos = 0;
Xpos = 0;
if (ns){
for (I = 0; I < 14; I++)
document.write('<LAYER NAME="n'+I+'" LEFT=0 TOP=0 CLIP="0,0,'+I/4+','+I/4+'"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove = nMouse;
}
else{
document.write('<div style="position:absolute;top:0;left:0"><div style="position:relative">');
for (I=0; I < 14; I++)
{document.write('<div id="me" style="position:absolute;top:0;left:0;width:'+I/4+';height:'+I/4+';font-size:'+I/4+'"></div>')}
document.write('</div></div>');
function iMouse() {
Ypos = event.y+document.body.scrollTop;
Xpos = event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
function Comet() {
var yBase = (document.layers)?window.innerHeight/4:window.document.body.clientHeight/4;
var xBase = (document.layers)?window.innerWidth/4:window.document.body.clientWidth/4;
for (I = 0; I < 14; I++){
var randCol = Math.round(Math.random()*8);
var layer = (document.layers)?document.layers['n'+I]:me[I].style;
layer.top =Ypos + yBase*Math.cos((currStep+I*4)/12)*Math.cos(0.7+currStep/200);
layer.left = Xpos + xBase*Math.sin((currStep+I*3)/10)*Math.sin(8.2+currStep/400);
if (ns) layer.bgColor = Clrs[randCol];
else
layer.background = Clrs[randCol];
}
currStep += step;
setTimeout("Comet()",10);
}
window.onload = Comet;
</script>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<SCRIPT LANGUAGE="JavaScript">
ns = (document.layers)?1:0;
Clrs = new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
yBase = 0;
xBase = 0;
step = 3;
currStep = 0;
Ypos = 0;
Xpos = 0;
if (ns){
for (I = 0; I < 14; I++)
document.write('<LAYER NAME="n'+I+'" LEFT=0 TOP=0 CLIP="0,0,'+I/4+','+I/4+'"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove = nMouse;
}
else{
document.write('<div style="position:absolute;top:0;left:0"><div style="position:relative">');
for (I=0; I < 14; I++)
{document.write('<div id="me" style="position:absolute;top:0;left:0;width:'+I/4+';height:'+I/4+';font-size:'+I/4+'"></div>')}
document.write('</div></div>');
function iMouse() {
Ypos = event.y+document.body.scrollTop;
Xpos = event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
function Comet() {
var yBase = (document.layers)?window.innerHeight/4:window.document.body.clientHeight/4;
var xBase = (document.layers)?window.innerWidth/4:window.document.body.clientWidth/4;
for (I = 0; I < 14; I++){
var randCol = Math.round(Math.random()*8);
var layer = (document.layers)?document.layers['n'+I]:me[I].style;
layer.top =Ypos + yBase*Math.cos((currStep+I*4)/12)*Math.cos(0.7+currStep/200);
layer.left = Xpos + xBase*Math.sin((currStep+I*3)/10)*Math.sin(8.2+currStep/400);
if (ns) layer.bgColor = Clrs[randCol];
else
layer.background = Clrs[randCol];
}
currStep += step;
setTimeout("Comet()",10);
}
window.onload = Comet;
</script>