当前位置: 首页 > 编程笔记 >

js实现宇宙星空背景效果的方法

潘意
2023-03-14
本文向大家介绍js实现宇宙星空背景效果的方法,包括了js实现宇宙星空背景效果的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了js实现宇宙星空背景效果的方法。分享给大家供大家参考。具体实现方法如下:


<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<TITLE>宇宙星空背景效果,Js特效</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css"> 

.star {

position:absolute;

layer-background-color:white;

visibility:visible;

top:-50px;

width:50px;

height:50px;

font-size:1px;

background-color:white;

}

.60pt{font-size:60pt;color:#ff66cc;}

</style>

<SCRIPT LANGUAGE="JavaScript"> 

<!--

var starnum = 75; // 星星的数目

var isNS = (document.layers);

var _all = (isNS)? '' : 'all.';

var _style = (isNS) ? '' : '.style';

var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;

function getstartpos(obj) {  //定义星星移动的起始位置

obj.deltay = Math.floor(Math.random() * 12);    //用随机函数决定

obj.deltax = Math.floor(Math.random() * 12);

obj.xdir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

obj.ydir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

obj.counter = 1;

if (isNS) {

obj.clip.width = 1;

obj.clip.height = 1;

obj.moveTo(xoffset+pageXOffset, yoffset+pageYOffset);

} else {

obj.width = 1;

obj.height = 1; 

obj.pixelTop = yoffset+document.body.scrollTop;

obj.pixelLeft = xoffset+document.body.scrollLeft;

   }

}

function movestar(starN)   //移动星星的位置

{

tmpx = starN.deltax*starN.counter+starN.counter;

tmpy = starN.deltay*starN.counter+starN.counter;

if (isNS) {

starN.clip.width = starN.counter / 3;

starN.clip.height = starN.counter / 3;

scrlx = pageXOffset;

scrly = pageYOffset;

if ((starN.left+tmpx >= w_x+scrlx) || (starN.top+tmpy >= w_y+scrly) || (starN.left-tmpx <= scrlx) || (starN.top-tmpy <= scrly)) {

getstartpos(starN);

} else {

eval('starN.moveBy('+starN.xdir+tmpx+', '+starN.ydir+tmpy+')');

   }

} else {

starN.width = starN.counter/3;

starN.height = starN.counter/3;

scrlx = document.body.scrollLeft;

scrly = document.body.scrollTop;

if ((starN.pixelLeft+tmpx >= w_x+scrlx)||(starN.pixelTop+tmpy >= w_y+scrly) || (starN.pixelLeft-tmpx <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {

getstartpos(starN);

} else {

eval('starN.pixelTop'+starN.ydir+'=tmpy');

eval('starN.pixelLeft'+starN.xdir+'=tmpx');

   }

}

starN.counter++;

}

function animate() //让所有的星星动起来

{

for(i=1; i <= starnum; i++) {

movestar(eval('star'+i));

}

setTimeout('animate()', 100);

}

 

function findwindowparams() {  //定义星星移动的起始位置

w_x = (isNS) ? window.innerWidth : document.body.clientWidth;

w_y = (isNS) ? window.innerHeight : document.body.clientHeight;

xoffset = w_x / 2;

yoffset = w_y / 2;

for (i = 1; i <= starnum; i++) {

getstartpos(eval('star'+i));

   }

}

function resizeNS() {

setTimeout('document.location.reload()', 400);

}

(isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams;

window.onload = new Function("findwindowparams(); animate();");

-->

</script>

</HEAD>

<BODY>

<body  bgcolor=#999999>

<SCRIPT LANGUAGE="JavaScript"> 

<!--

for (i = 1; i <= starnum; i++) { //给星星定义层

document.writeln('<div id="star'+i+'" class="star"></div>');

eval('var star'+i+'=document.'+_all+'star'+i+_style);

}

-->

</script>

<p><center>

<font class=60pt><br>飞翔在<br>宇宙的星空中<br></font>

</center><p>

</body>

</html>

运行效果如下图所示:

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍JS烟花背景效果实现方法,包括了JS烟花背景效果实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS烟花背景效果实现方法。分享给大家供大家参考。具体实现方法如下: 运行效果如下所示: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍js实现漫天星星效果,包括了js实现漫天星星效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 我正在尝试处理我用tesseract录制的黑板图像,但运气不好。我想过做预处理来帮助提高我们的结果,但不确定该用什么方法来调用它。 这是我拥有的图像: 下面是我正在运行的< code>tesseract命令: 请注意,它不必正确处理所有数学符号,但至少要得到,也许。 我以前有一张照片,只用这些命令就能很好地工作。照片如下: 下面是它会产生的结果: 这并不完美,但比我以前得到的要好得多。如何提高新黑

  • 本文向大家介绍用JS中split方法实现彩色文字背景效果实例,包括了用JS中split方法实现彩色文字背景效果实例的使用技巧和注意事项,需要的朋友参考一下 先来看看实现效果图 效果实现步骤:      1、获取要用到的元素;      2、声明一个数组变量(arrColor)存放颜色值;      3、给按钮添加点击事件;      4、获取文本框的value值,并用split方法把文本框的字符串

  • 本文向大家介绍js实现商城星星评分的效果,包括了js实现商城星星评分的效果的使用技巧和注意事项,需要的朋友参考一下 在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善。 html如下: css样式: 最后js调用如下: 以上就是本文的全部内容,希望对大家的学习jquery程序设计有所帮助。

  • 本文向大家介绍android dialog背景模糊化效果实现方法,包括了android dialog背景模糊化效果实现方法的使用技巧和注意事项,需要的朋友参考一下 最近做项目有这样的需求: 在activity中启动一个dialog时, 启动的dialog的背景设为启动acitivity的模糊化图片. 实现思路: 1. 截屏, 获取当前activity的界面 2. 将获取的照片进行模糊化 3. 将模