星空背景JavaScript代码

原创 2006年06月01日 13:34:00
<!-- 用<BODY bgColor=#000000 onload=fly()>替换原有的<body> -->
<!--将以下代码加入HTML的<Body></Body>之间-->
<SCRIPT language=JavaScript>
<!--
SmallStars = 30;
LargeStars = 10;

SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < SmallStars; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>")}
for (i = 0; i < LargeStars; i++)
{document.write("<LAYER NAME='ln"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFFF' CLIP='0,0,2,2'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < SmallStars; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>')}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < LargeStars; i++)
{document.write('<div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"></div>')}
document.write('</div>');
document.write('</div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
//Inital placement!
for (i=0; i < SmallStars; i++)
{                                                               
SmallYpos[i] = Math.round(Math.random()*WinHeight);
SmallXpos[i] = Math.round(Math.random()*WinWidth);
Smallspeed[i]= Math.random()*5+1;
}
for (i=0; i < LargeStars; i++)
{                                                               
LargeYpos[i] = Math.round(Math.random()*WinHeight);
LargeXpos[i] = Math.round(Math.random()*WinWidth);
Largespeed[i]= Math.random()*10+5;
}
function fly(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < LargeStars; i++)
{
LargeXpos[i]-=Largespeed[i];
if (LargeXpos[i] < -10)
  {
  LargeXpos[i]=WinWidth;
  LargeYpos[i]=Math.round(Math.random()*WinHeight);
  Largespeed[i]=Math.random()*10+5;
  }
if (ns){
document.layers['ln'+i].left=LargeXpos[i];
document.layers['ln'+i].top=LargeYpos[i]+hscrll;
}
else{
li[i].style.pixelLeft=LargeXpos[i];
li[i].style.pixelTop=LargeYpos[i]+hscrll;
}
}

for (i=0; i < SmallStars; i++)
{
SmallXpos[i]-=Smallspeed[i];
if (SmallXpos[i] < -10)
  {
  SmallXpos[i]=WinWidth;
  SmallYpos[i]=Math.round(Math.random()*WinHeight);
  Smallspeed[i]=Math.random()*5+1;
  }
if (ns){
document.layers['sn'+i].left=SmallXpos[i];
document.layers['sn'+i].top=SmallYpos[i]+hscrll;
}
else{
si[i].style.pixelLeft=SmallXpos[i];
si[i].style.pixelTop=SmallYpos[i]+hscrll;
}
}
setTimeout('fly()',10);
}
//fly();
//-->
</SCRIPT>

前端页面漂亮的星空背景 ---js效果

html代码:css代码 html, body { height: 100%; overflow: hidden; } body { width: ...
  • StubbornAccepted
  • StubbornAccepted
  • 2016年10月27日 13:04
  • 3232

利用html5-canvas及javascript产生三维星空效果的代码

从网上搜集到的一段利用纯html5-canvas以及javascript生成三维星空效果的代码。代码的核心部分是“”标签中包含的外部javascript代码-html5_3d_animation.js...
  • black__zzc
  • black__zzc
  • 2016年08月10日 23:16
  • 1837

初试three.js--绘制星空

昨天上网时看到一个three.js入门教程就学着做了一下,效果如下 根据鼠标y位置粒子移动速度也会变化 Three.js有三种主要类型的3D对象:三角形(triangles),直线(lines)和...
  • cat_foursi
  • cat_foursi
  • 2017年05月10日 16:09
  • 1017

基于canvas画布的星空效果

canvas是html5的新标签,其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的,所以呢为了特效肯定是牺牲一定的兼容性。这里呢,分享一个基于canvas开发的浩瀚星河插件,其实这...
  • u014725878
  • u014725878
  • 2016年12月01日 16:52
  • 4016

星空背景JavaScript代码

替换原有的 -->之间-->SmallStars = 30;LargeStars = 10;SmallYpos = new Array();SmallXpos = new Array();LargeY...
  • musttieying
  • musttieying
  • 2006年06月01日 13:34
  • 697

OPENGL 星空 背景 图像

  • 2009年08月09日 16:05
  • 629KB
  • 下载

HTML5梦幻星空,可用作网页背景

HTML5特效展示,梦幻星空,由于使用了html5,请使用支持html5的浏览器查看,源码可以直接查看。严格来说是用了HTML5中的canvas,所以需要支持html5的浏览器(Chrome,Fire...
  • life66881
  • life66881
  • 2015年06月24日 13:37
  • 2002

canvas实现粒子星空连线

离子星空 *{ margin: 0; padding: 0; } #myCanvas { background-color: black; } ...
  • qq_37506861
  • qq_37506861
  • 2017年08月23日 19:47
  • 537

html5腾讯QQ登录界面背景动画特效

  • 2015年12月03日 11:23
  • 2KB
  • 下载

Eclipse背景颜色修改

Eclipse背景颜色修改 操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些。设置方法如下:...
  • JavaWebRookie
  • JavaWebRookie
  • 2015年10月16日 12:54
  • 771
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:星空背景JavaScript代码
举报原因:
原因补充:

(最多只允许输入30个字)