新版泥客入口

首页 | 新闻 | 网址 | 博客 | 科技 | 非凡 | 杂烩 | 掉牙 | 美图 | 文集 | 扯淡 | 精屁 | 商务 | 网页制作 | 论坛

 
   泥客网>>网页制作  
 
 
  跟随鼠标的星星点点,变化过程非常漂亮

文章来源: BBS.KESONIC.COM

把如下代码加入<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>



  2005/8/30 23:43:13  阅读 3090 次   [关闭窗口] [打印本页]

相关文章: 近期热点:

视频播放代码(real player) (4485)
控制网页中字体大小的简单方法(锁定... (4467)
根据时间变换的提示信息 (4422)
环绕转动的欢迎标语代码 (4414)
视频播放代码(windows me... (4340)


一些简单实用的HTML代码 (5101)
收集了一些有关网页设计的问题集 (4743)
40种网页常用小技巧(JavaSc... (4620)
视频播放代码(real player) (4485)
控制网页中字体大小的简单方法(锁定... (4467)
根据时间变换的提示信息 (4422)
环绕转动的欢迎标语代码 (4414)
视频播放代码(windows me... (4340)
做网站的必要准备↑
关于Kesonic.com - 站内搜索 - 泥客论坛 - 泥客留言 - 泥客简介 - 网站地图 - 管理
  Copyright 2002-2011 泥客网—小轲之家 All Rights Reserved