新版泥客入口

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

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

文章来源: 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  阅读 3395 次   [关闭窗口] [打印本页]

相关文章: 近期热点:

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


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