JavaScript实现下雪(Snow)效果
代码1：
<title>Happy New Year</title>
<body bgcolor="#ff3300" leftmargin="0" topmargin="0" onLoad="snow()" AAAD98>
<script language="JavaScript">
<!--
N = 100;
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;
iH=(document.layers)?window.innerHeight:window.document.body.clientHeight;
iW=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
A[i]=0;
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
}
if (V){
for (i = 0; i < N; i++)
{document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0 BGCOLOR='#ffffff' CLIP='0,0,"+M[i]+","+M[i]+"'></LAYER>")}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < N; i++)
{document.write('<div id="si" style="position:absolute;top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#ffffff;font-size:'+M[i]+'"></div>')}
document.write('</div></div>');
}
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var W=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var T=(document.layers)?window.pageYOffset:document.body.scrollTop;
var L=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
Y[i]+=sy;
X[i]+=sx;
if (Y[i] > H){
Y[i]=-10;
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
}
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
}
setTimeout('snow()',20);
}
//-->
</script>
代码2：
<body bgcolor=#ee3300>
<style>
.drop { position: absolute; width: 3; filter: flipV(), flipH(); font-size: 40; color: #ffffff }
</style>
<script language="javascript">
snow = false; // false-rain; true-snow
snowsym = " * " file://These are the symbols for each
rainsym = " * " file://You can put images here.
howmany = 20 file://How many drops/snowflakes?
/**************Do not need to change anything below***********/
if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}
else{sym = rainsym; speed=30; drops=howmany; angle=6}
movex = -speed/angle; movey = speed; count = 0;
function moverain(){
for(move = 0; move < drops; move++){
xx[move]+=movex; yy[move]+=mv[move];
hmm = Math.round(Math.random()*1);
if(xx[move] < 0){xx[move] = maxx+10;}
if(yy[move] > maxy){yy[move] = 10;}
drop[move].left = xx[move]
drop[move].top = yy[move]+document.body.scrollTop;
}setTimeout('moverain()','1')}
</script>
<script language="javascript">
if (document.all){
drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()
ly = "document.all[/'"; st = "/'].style"
for(make = 0; make < drops; make++){
document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');
drop[make] = eval(ly+'drop'+make+st);
maxx = document.body.clientWidth-40
maxy = document.body.clientHeight-40
xx[make] = Math.random()*maxx;
yy[make] = -100-Math.random()*maxy;
drop[make].left = xx[make]
drop[make].top = yy[make]
mv[make] = (Math.random()*5)+speed/16;
drop[make].fontSize = (Math.random()*10)+20;
if(snow){col = 'white'}else{col = 'white'}
drop[make].color = col;
}
window.οnlοad=moverain
}
</script>
</body>
代码3：
<body bgcolor=#ee3300>
<script LANGUAGE="JavaScript1.2">
<!--
var no = 25;
var speed = 10;
var snowflake = "http://www.cnbruce.com/blog/uploadimg/2004122215384750532.gif";
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {
if (i == 0) {
document.write("<layer name=/"dot"+ i +"/" left=/"15/" ");
document.write("top=/"15/" visibility=/"show/"><img src=/"");
document.write(snowflake + "/" border=/"0/"></layer>");
} else {
document.write("<layer name=/"dot"+ i +"/" left=/"15/" ");
document.write("top=/"15/" visibility=/"show/"><img src=/"");
document.write(snowflake + "/" border=/"0/"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=/"dot"+ i +"/" style=/"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;/"><img src=/"");
document.write(snowflake + "/" border=/"0/"></div>");
} else {
document.write("<div id=/"dot"+ i +"/" style=/"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;/"><img src=/"");
document.write(snowflake + "/" border=/"0/"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
//-->
</script>
</body>
JavaScript实现下雪(Snow)效果相关推荐
- 用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言 由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
- css3下雪的效果,首页下雪效果
首页下雪效果 Posted on 2019-09-17 14:18 大艾木 阅读(...) 评论(...) 编辑 收藏 下雪效果,转自网络,快去试试吧 :) 原理 通过多张雪花图片,不同速度的移动,达 ...
- html 页面下雪效果,HTML5超逼真下雪场景效果
简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...
- 下雪html特效代码,JavaScript 实现下雪特效的示例代码
直接上代码 下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...
- HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
- JavaScript 图片滑动切换效果
序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 序二(09/03/ ...
- html页面js遍历listview,javascript实现的listview效果
javascript实现的listview效果 更新时间:2007年04月28日 00:00:00 作者: #oContainer { width: 600px; height: 500px; b ...
- html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
- java许愿墙_18.JavaScript实现许愿墙效果
JavaScript实现许愿墙效果: Document margin:0; } .paper { position: fixed; left: 200px; top: 200px; width: 20 ...
最新文章
- 第7章——狄克特斯拉算法
- 多进程并发环境下的磁盘调度性能分析_来说说如何提高服务器的并发能力?
- 5种Python统计次数的方法
- Android_(服务)Vibrator振动器
- rk3399_android7.1查看当前的ddr频率
- 高校邦python网课答案_高校邦编程之美——python网课答案公众号
- MyBase 与 HTML Help Workshop 编辑chm
- windows server服务器打安全补丁
- mpp新增一个字段_DM8 MPP环境搭建
- 2D卷积和3D卷积的区别及pytorch实现
- android apk下载完成后调用安装
- python中文分句_Python 中文分句
- 线段树——区间合并（模板题）
- [JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!
- 爬虫入门经典(四) | 如何爬取豆瓣电影Top250
- 如何正确解决win10系统下C盘空间不能扩展的问题！
- Ubuntu 下大文件夹分卷压缩
- 解决重邮无法访问蓝鸽听力以及无法访问部分内网的解决方法
- 【英语】或许你该开始读英文原著了
- C++——流和输入输出