Javascript實現(xiàn)多彩雪花從天降散落效果的方法
本文實例講述了Javascript實現(xiàn)多彩雪花從天降散落效果的方法。分享給大家供大家參考。具體分析如下：
先來看看運行效果，如下圖所示：
完整源代碼如下：
<html xmlns="http://www.w3.org/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.net";
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 jb51Snow() {
window.location.reload();
} if (yanhua === 'yanhua.jb' + '51.' + 'net')
setInterval(jb51Snow, 6000);
</script>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
reduce()方法接收一個函數(shù)作為累加器(accumulator),數(shù)組中的每個值(從左到右)開始縮減,最終為一個值,下面這篇文章主要給大家介紹了關于JavaScript中reduce()的用法實例,需要的朋友可以參考下2022-05-05
jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
這篇文章主要為大家詳細介紹了jquery插件bootstrapValidator數(shù)據(jù)驗證使用教程，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了js 圖片懶加載的實現(xiàn)，幫助大家更好的優(yōu)化自身網(wǎng)頁，提高網(wǎng)頁響應速度，感興趣的朋友可以了解下2020-10-10
本文是對js中apply方法的使用進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
今天小編就為大家分享一篇layer實現(xiàn)彈出層自動調節(jié)位置，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中arguments和this對象用法分析
這篇文章主要介紹了JavaScript中arguments和this對象用法,結合實例形式較為詳細的分析了arguments對象和this對象的功能、常見用法及相關操作注意事項,需要的朋友可以參考下2018-08-08
JS中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例
下面小編就為大家?guī)硪黄狫S中判斷字符串中出現(xiàn)次數(shù)最多的字符及出現(xiàn)的次數(shù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
js 頁面關閉前的出現(xiàn)提示的實現(xiàn)代碼
主流的瀏覽器都支持onbeforeunload事件(即頁面卸載前觸發(fā)的事件)，而現(xiàn)在大多網(wǎng)站都用到了此功能2011-05-05
本篇文章主要介紹了徹底解決 webpack 打包文件體積過大問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了JS實現(xiàn)可視化音頻效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01