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

作者：bea

本文实例讲述了Javascript实现多彩雪花从天降散落效果的方法。分享给大家供大家参考。具体分析如下：
先来看看运行效果，如下图所示：

完整源代码如下：

代码如下:

<!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>Javascript多彩雪花从天降</title>
<style type="text/css">
.Snow{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}
.Title{color:red;height:140px;width:800px;margin:0px auto;text-align:center}
</style>
</head>

<body>
<script type="text/javascript"> var yanhua = "yanhua."; 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.top = 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.' + 'net') fireworks().init();
function Snow() { window.location.reload(); } if (yanhua === 'yanhua.jb' + '51.' + 'net') setInterval(Snow, 6000); </script>
</body> </html>

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

有用 | 无用

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

猜你喜欢

您可能感兴趣的文章: