以文本方式查看主题

-  泥客论坛(十几年前的回忆)  (http://kesonic.com/bbs/index.asp)
--  ☆网页制作☆  (http://kesonic.com/bbs/list.asp?boardid=81)
----  跟随鼠标的星星点点,变化过程非常漂亮  (http://kesonic.com/bbs/dispbbs.asp?boardid=81&id=4546)

--  作者:dmacro
--  发布时间:2003/9/30 9:51:30

--  跟随鼠标的星星点点,变化过程非常漂亮
把如下代码加入<body>区域中

<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF8000" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFF00" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00FF00" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000FF" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,2,2"></LAYER>

<LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FFFFFF" CLIP="0,0,2,2"></LAYER>

<div id="starsDiv" style="position:absolute;top:0px;left:0px">

<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#ffff00;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#ff0000;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>

<div style="position:relative;width:2px;height:2px;background:#FF00FF;font-size:2px;visibility:visible"></div>

</div>

<script language="JavaScript">

<!--  Script adapted for Explorer by kurt.grigg@virgin.net

if (document.layers)

{window.captureEvents(Event.MOUSEMOVE);}

var yBase = 200;

var xBase = 200;

var step = .2;

var currStep = 0;

var Xpos = 1;

var Ypos = 1;

var i = 0;

var j = 0;

if (document.all)

{

function MoveHandler(){

Xpos = document.body.scrollLeft+event.x;

Ypos = document.body.scrollTop+event.y;

}

document.onmousemove = MoveHandler;

}

else if (document.layers)

{

function xMoveHandler(evnt){

Xpos = evnt.pageX;

Ypos = evnt.pageY;

}

window.onMouseMove = xMoveHandler;

}

function animateLogo(){

if (document.all)

{

yBase = window.document.body.offsetHeight/4;

xBase = window.document.body.offsetWidth/4;

}

else if (document.layers)

{

yBase = window.innerHeight/4;

xBase = window.innerWidth/4;

}

if (document.all)

{

for ( i = 0 ; i < starsDiv.all.length ; i++ )

{

  starsDiv.all[i].style.top = Ypos + Math.cos((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);

  starsDiv.all[i].style.left = Xpos + Math.sin((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);

}

}

else if (document.layers)

{

for ( j = 0 ; j < 7 ; j++ ) //7 is number of NS layers!

{

  var templayer="a"+j

  document.layers[templayer].top = Ypos + Math.cos((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);

  document.layers[templayer].left =Xpos + Math.sin((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin(10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);

}

}

currStep += step;

setTimeout("animateLogo()", 10);

}

animateLogo();

// -->

</script>