星空背景JavaScript代码

最新推荐文章于 2024-07-31 10:25:36 发布
最新推荐文章于 2024-07-31 10:25:36 发布
阅读量3.4k 收藏 2
点赞数
分类专栏： HTML+CSS+JS 文章标签： javascript div layer function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/musttieying/article/details/767688
版权
<!-- 用<BODY bgColor=#000000 οnlοad=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>
musttieying
关注
专栏目录
星空特效代码js
10-16
一段用js写的星空特效代码，通过调整，可以做为页面背景使用
JavaScript_星空
Watson_Ashin的博客
08-23 306
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body{ background-color: black;
3.js - 星空特效
pig_ning的博客
07-31 593
3.js - 星空特效
Javascript动态星空背景
08-22
使用很多移动的白色小点代表星星，两个星星在一定距离内会有白线连接，白线透明度根据距离增大或缩小实现圆滑，鼠标也代表一颗星星
HTML+JS实现星空背景
m0_46664046的博客
12-16 5867
接下来我将以通俗易懂的方式来讲解如何通过javascript实现好看的星空背景
JavaScript篇---星空背景（有很多小细节和小知识点）
weixin_44552302的博客
01-11 527
先来看一下效果吧 星星闪耀，大小不一；鼠标hover时会放大旋转 只需要一张静态的星星图片，就可以通过JS和CSS结合实现这样的效果 虽然有些细节，但还是比较简单的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&lt...
JS+HTML5酷炫星空背景动画特效特效代码
03-20
"JS+HTML5酷炫星空背景动画特效特效代码"就是这样一个利用JavaScript和HTML5 Canvas技术，为网页创造出引人入胜的星空背景动画的例子。这篇文章将详细介绍这个特效的实现原理和技术要点。 首先，HTML5 Canvas是一个...
跨年烟花代码-javascript烟花星空魔法师源代码下载
12-12
在这个项目中，开发者通过JavaScript实现了一个模拟烟花绽放、星星闪烁的动态星空背景，为网页增添节日氛围。 1. JavaScript基础： JavaScript是一种广泛用于网页开发的脚本语言，它允许动态内容的创建，如动画、...
HTML5/ CSS简约星空动态背景
07-14
在创建星空背景时，我们可能不会用到这些结构性元素，但会用到`<canvas>`元素，它是HTML5的一个重要特性，允许开发者在网页上进行动态图形绘制。 在本项目中，`<canvas>`元素将被用于绘制星空。我们可以通过...
HTML5全屏星空背景动画特效特效代码
03-20
此外，`jiaoben4923`可能是源代码文件，可能包含HTML结构、CSS样式以及实现动画效果的JavaScript代码。而`.url`文件是URL快捷方式，可能指向了示例演示页或相关教程页面。 总的来说，HTML5全屏星空背景动画特效是...
js星空效果代码
10-30
用js实现的星空效果代码，正壮观
星空特效代码
10-17
一段通过canvas渲染的星空特效代码，该代码可以做为炫酷的页面背景
html5星空背景的登录页面带粒子特效代码
10-11
html5星空背景的登录页面带粒子特效代码帮运工一枚，仅供学习，不供商用
HTML5全屏星空背景动画特效
06-24
HTML5全屏星空背景动画特效是一款基于html5 canvas制作的星空背景动画效果。
登录动态模版 背景星空样式
05-06
web前端登录页面模版，使用Jquery制作的动态模版 背景星空样式
HTML5+JS实现的全屏星空特效源码
05-06
HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码
前端代码分享——星空背景特效（内含源码）
Why_does_it_work的博客
07-14 2582
提供的JavaScript代码是一个名为"WarpDrive"的jQuery插件，它创建了一个星空动画，类似于科幻媒体（如《星际迷航》）中所看到的"超光速"效果。
html星空代码复制,星空背景代码实现
weixin_35793067的博客
06-09 5056
var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d'),w = canvas.width = window.innerWidth,h = canvas.height = window.innerHeight,hue = 217,stars = [],count = 0,maxStars = 1200;...
js 实现星空背景
qq_44571444的博客
02-22 379
js实现宇宙星空效果
星空背景登录页面代码
最新发布
09-20
创建星空背景的登录页面代码通常涉及到HTML、CSS和JavaScript。下面是一个简单的示例，使用CSS3的线性渐变和伪元素实现星空效果： ```html <!DOCTYPE html> body { margin: 0; padding: 0; background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值