主页 / 网络编程 /

Javascript实现多彩雪花从天降散落效果的方法

网络编程 2021-07-04 21:47www.168986.cn编程入门
这篇文章主要介绍了Javascript实现多彩雪花从天降散落效果的方法,可实现雪花飘落及散开的效果,非常炫目华丽,需要的朋友可以参考下

本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法。分享给大家供大家参考。具体分析如下

先来看看运行效果，如下图所示

完整源代码如下

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml" >
<head>
<title>Javascript多彩雪花从天降</title>
<style type="text/css">
.jb51Snow{display:block; overflow:hidden; font-size:12px; position:absolute};
body{background:#000;margin:0px}
html{overflow:hidden; background:#000;}
a{color:White;text-decoration:none}
.jb51Title{color:red;height:140px;width:800px;margin:0px auto;text-align:center}
</style>
</head>

<body>

<script type="text/javascript">
var yanhua = "yanhua.jb51.";
var Fire = function (r, color) {
this.radius = r || 12;
this.color = color || "FF6600";
this.xpos = 0;
this.ypos = 0;
this.zpos = 0;
this.vx = 0;
this.vy = 0;
this.vz = 0;
this.mass = 1;
this.p = document.createElement("span");
this.p.className = "jb"+"51Snow";
this.p.innerHTML = "";
this.p.style.fontSize = this.radius + "px";
this.p.style.color = "#" + this.color;
}
Fire.prototype = {
append: function (parent) {
parent.appendChild(this.p);
},
setSize: function (scale) {
this.p.style.fontSize = this.radius scale + "px";
},
setPosition: function (x, y) {
this.p.style.left = x + "px";
this.p.style. = y + "px";
},
setVisible: function (b) {
this.p.style.display = b ? "block" : "none";
}
}
var fireworks = function () {
var fires = new Array();
var count = 100;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravity = .3;
var floor = 200;
var bounce = -.8;
var timer;
return {
init: function () {
for (var i = 0; i < count; i++) {
var color = 0xFF0000;
color = (Math.random() 0xFFFFFF).toString(16).toString().split(".")[0];
while (color.length < 6) {
color = "0" + color;
}
var fire = new Fire(12, color);
fires.push(fire);
fire.ypos = -100;
fire.vx = Math.random() 6 - 3;
fire.vy = Math.random() 6 - 3;
fire.vz = Math.random() 6 - 3;
fire.append(document.body);
}
var that = this;
timer = setInterval(function () {
for (var i = 0; i < count; i++) {
that.move(fires[i]);
}
}, 30);
},
move: function (fire) {
fire.vy += gravity;
fire.xpos += fire.vx;
fire.ypos += fire.vy;
fire.zpos += fire.vz;
if (fire.ypos > floor) {
fire.ypos = floor;
fire.vy = bounce;
}
if (fire.zpos > -fl) {
var scale = fl / (fl + fire.zpos);
fire.setSize(scale);
fire.setPosition(vpx + fire.xpos scale,
vpy + fire.ypos scale);
fire.setVisible(true);
} else {
fire.setVisible(false);
}
}
}
}
if (yanhua === 'yanhua.jb' + '51.' + '')
fireworks().init();

function jb51Snow() {
window.location.reload();
} if (yanhua === 'yanhua.jb' + '51.' + '')
setInterval(jb51Snow, 6000);
</script>

</body>
</html>

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

上一篇：JavaScript实现更改网页背景与字体颜色的方法 下一篇：jQuery及JS实现循环中暂停的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by