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


Posted in Javascript onMarch 03, 2015

本文实例讲述了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>

运行效果如下图所示:

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

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

Javascript 相关文章推荐
jquery简单体验
Jan 10 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
vue文件树组件使用详解
Mar 29 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Angular中的Promise对象($q介绍)
Mar 03 #Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 #Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 #Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
Mar 03 #Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 #Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 #Javascript
浅谈JavaScript数据类型
Mar 03 #Javascript
You might like
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
js实现随机数小游戏
2019/06/28 Javascript
python中xrange用法分析
2015/04/15 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
详解python中的lambda与sorted函数
2020/09/04 Python
华润集团网上药店:健一网
2016/09/19 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
英语演讲稿范文
2014/01/03 职场文书
总会计师岗位职责
2014/02/19 职场文书
广告创意求职信
2014/03/17 职场文书
总经理检讨书范文
2015/02/16 职场文书
司机岗位职责范本
2015/04/10 职场文书
文明礼仪主题班会
2015/08/13 职场文书
销售口号霸气押韵
2015/12/24 职场文书
2016年师德学习心得体会
2016/01/12 职场文书