繁体中文
设为首页
加入收藏
首页
网页制作
脚本专栏
网络编程
数据库
源码下载
软件下载
脚本下载
平面设计
媒体动画
网站技巧
实用技巧
免费资源
主机租用
域名查询
典型特效
按钮特效
页面背景
鼠标特效
时间日期
状态特效
图象特效
cookie
下拉菜单
链接特效
导航菜单
页面导航：
首页
→
网络编程
→
JavaScript
→
网页特效
→
页面背景
→ 正文内容 星空效果
js星空效果代码
发布：dxy 字体：[
增加
减小
] 类型：转载
用js实现的星空效果代码，正壮观
点击运行可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>星空效果_www.jb51.net</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- body{ margin:0px; padding:0px; } body,td{ font-size:9pt; } .star{ position:absolute; width:1px; height:1px; font-size:0px; background-color:#ffffff; } --> </style> <script type="text/javascript"> <!-- try{ var winSize = { width:document.documentElement.clientWidth, height:document.documentElement.clientHeight } var MooSky = function(options){ this.options = options; this.stars = new Array(); this.show = function(){ for(var i=0;i<this.options.num;i++){ var newStar = new MooStar({ container : this.options.container }); newStar.fly(); this.stars[i] = newStar; } } } var MooStar = function(options){ this.options = options; if(!!this.options.container){ this.container = document.getElementById(this.options.container); }else{ this.container = document.body; } this.baseSpeed = 10; var o = this; this.speed = Math.round(Math.random()*this.baseSpeed)+1; this.dom = document.createElement('DIV'); this.dom.className = 'star'; if(!!this.options.container){ var left = Math.round(Math.random()*this.container.offsetWidth-1); var top = Math.round(Math.random()*this.container.offsetHeight-1); this.dom.style.left = left+'px'; this.dom.style.top = top+'px'; this.container.appendChild(this.dom); }else{ this.dom.style.left = Math.random()*winSize.width-1+'px'; this.dom.style.top = Math.random()*winSize.height-1+'px'; document.body.appendChild(this.dom); } } MooStar.prototype.fly = function(){ if(this.dom.offsetLeft<0){ if(!!this.options.container){ var left = this.container.offsetWidth-1; var top = Math.round(Math.random()*this.container.offsetHeight)-1; this.dom.style.left = left+'px'; this.dom.style.top = top+'px'; }else{ this.dom.style.left = winSize.width-1+'px'; this.dom.style.top = Math.random()*winSize.height-1+'px'; } }else{ var left = this.dom.offsetLeft-this.speed; if(left<0) { this.speed = Math.round(Math.random()*this.baseSpeed)+1; if(!!this.options.container){ left = this.container.offsetWidth-1; var top = Math.random()*this.container.offsetHeight-1; this.dom.style.top = top+'px'; }else{ left = winSize.width-1; } } this.dom.style.left = left+'px'; var self = this; setTimeout(function(){self.fly()},this.speed); } } window.onload = function(){ var mooSky1 = new MooSky({ num:30, container : 'skyContainer1' //如果不声明container，则是给document.body实现 }); mooSky1.show(); var mooSky2 = new MooSky({ num:20, container : 'skyContainer2' }); mooSky2.show(); /* //这是给body用的 var mooSky3 = new MooSky({ num:20 }); mooSky3.show(); */ } window.onresize = function(){ winSize = { width:document.documentElement.clientWidth, height:document.documentElement.clientHeight } } }catch(e){ alert(e.description); } //--> </script> </head> <body scroll=no bgcolor=#000000> <div id='skyContainer1' style="height:100px;background-color:#222222;overflow:hidden;font-size:70px;color:#FFFF00;font-weight:bolder">ABCD</div> <div id='skyContainer2' style="position:absolute;left:200px;top:200px;width:500px;height:100px;background-color:#222222;"></div> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
js
星空效果
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
js实现小鱼吐泡泡在页面游动特效
下一篇文章：没有文章
·在百度中搜索关于“
js星空效果代码
相关内容
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
javascript背投广告代码的完善
javascript背景颜色按时变换
一种让页面完全把过来显示的脚本代码
js实现小鱼吐泡泡在页面游动特效
弹出提示的效果代码
javascript实现的仿腾讯QQ窗口抖动效果代
网页背景渐变效果代码
js实现的层变换效果
js可拖动的后台界面
仿3721首页模块拖曳移动效果js代码[可拖曳
最 近 更 新
javascript背景颜色按时变换
JavaScript 渐变效果页面图片控制
js可拖动的后台界面
直接生成打开窗口代码，不必下载
弹出提示的效果代码
js星空效果代码
内部的小页面，用层制作，随机变色
js实现小鱼吐泡泡在页面游动特效
javascript背投广告代码的完善
简洁的一个实现网页全屏代码
热 点 排 行
简洁的一个实现网页全屏代码
网页背景渐变效果代码
javascript背景颜色按时变换
javascript用层模拟可移动的小窗
js实现的层变换效果
斑马线效果代码
背景，文字渐变（无闪屏）
弹出提示的效果代码
javascript背投广告代码的完善
js可拖动的后台界面
文章评论
共有 位脚本之家网友发表了评论我来说两句