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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
很好用的PHP数据库类
2009/05/27 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php解析url的三个示例
2014/01/20 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
React 组件间的通信示例
2018/06/14 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Django 前后台的数据传递的方法
2017/08/08 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
python代码实现图书管理系统
2020/11/30 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
员工2014年度工作总结
2014/12/09 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android