`
happmaoo
  • 浏览: 4349863 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JavaScript实现下雪(Snow)效果

JavaScriptXPIEBlog 
阅读更多

代码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.onload=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>

代码4：

是

分享到：
| 矢量地图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript下雪效果

    JavaScript实现下雪(Snow)效果 封装为单独的脚本文件,很容易使用

    snow:javascript下雪插件

    snowjavascript下雪插件安装npm i any-snow -S使用// browser[removed][removed]new $Snow(options);// commonjsconst $Snow = require('any-snow');new $Snow(options);// es moduleimport $Snow from '$Snow';new ...

    圣诞下雪html代码.txt

    要在 HTML 网页上实现圣诞下雪的效果，可以遵循以下步骤： 1.在 HTML 文件中添加一个容器元素，用于包含雪花效果的元素，例如： 2.在 CSS 文件中设置容器元素的样式，包括宽度、高度和背景颜色等。这里我们使用背景...

    下雪了 javascript实现雪花飞舞

    本文实例为大家分享了雪花飞舞效果javascript实现，供大家参考，具体内容如下 原理: 1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。 2、js获取创建的DIV并改变其top属性值，当下落的高度...

    如何使用less实现随机下雪动画详解

    前言 元旦在公司撸码，想起圣诞节的摇摇乐项目有段代码挺有意思的，借着空闲的时间把代码抽出来，沉淀下经验。 冬天来了，设计师说摇摇乐的场景需要随机...上图的雪花效果还蛮炫酷吧，怎么实现呢？less因为有以下的

    js-Snow:模拟下雪的脚本

    js-Snow // 模拟下雪的脚本。 主要版本由 Ivan Lazarevic ( ) 于 2012 年创建。 所做的修改： 我应用了 css 来改变雪花的颜色。 它的值可以更容易地修改（minSize、maxSize、newOn）。 使用最新版本的 jQuery（2.1.1...

    Let-It-Snow:您网页的简单像素下雪

    让它下雪吧 您网页的简单像素下雪

    Snowfall.js:让它下雪……在现代浏览器中使用 CSS3 转换和过渡的任何页面上

    降雪.js Let It Snow... 在现代浏览器中使用 CSS3 转换和过渡的任何页面上。演示用法 var snow = new Snowfall ( ) ; 或者 var snow = new Snowfall ( { type : "image" , conetnt : [ "img/flake1.png" , "img/...

    react-native-snow-bg:React Native 动画雪景背景主题

    react-native-snow-bg React Native 动画雪背景主题。 Snowlakes 具有随机样式 - 外观、不透明度、大小和位置以及自定义动画 - 从左到右下落、旋转和“摇晃”运动。 它可以用于 ios 和 android 作为不错的冬季主题...

    snow-day-calculator

    这是我在脑海中想了很长时间但从未真正实现过的另一个项目。 一天晚上，我决定自己打败。 我讨厌比赛网站的外观，我认为它的算法可以使用一些改进，因为它永远不会让我的正确。 ###你使用了什么技术？ AngularJS ...

    雪「Snow」-crx插件

    HTML5 Javascript下雪 现在夏天，感觉很热吗？ 让我们看看雪！ 支持语言:English (United States)

    minnpost-snow-emergency:雪灾信息

    有一种尝试使用刮刀将其自动化，但在此之前，需要手动更新上次下雪紧急日期： 在第更新app.js文件中的lastSnowEmergency选项。 本地测试（见下文）。 构建和部署： grunt && grunt deploy 导入 CartoDB 数据已...

    react-native-confetti：React Native组件显示五彩纸屑

    它可以用作下雪效果动画，并可以选择使用unicode，表情符号或图像作为飞行片段。 这是一个例子雪效应 （动画没有滞后。这是因为您需要等待gif资产加载）抖动效果 （动画没有滞后。这是因为您需要等待gif资产加载）...

Magicbox
Global site tag (gtag.js) - Google Analytics