Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法
本文實(shí)例講述了Javascript實(shí)現(xiàn)多彩雪花從天降散落效果的方法。分享給大家供大家參考。具體分析如下:
先來(lái)看看運(yù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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- canvas雪花效果核心代碼分享
- Canvas實(shí)現(xiàn)動(dòng)態(tài)的雪花效果
- JS實(shí)現(xiàn)的雪花飄落特效示例
- 原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫(huà)效果
- JS和JQuery實(shí)現(xiàn)雪花飄落效果
- 下雪了 javascript實(shí)現(xiàn)雪花飛舞
- JS實(shí)現(xiàn)模擬風(fēng)力的雪花飄落效果
- 使用javascript實(shí)現(xiàn)雪花飄落的效果
- 用js代碼和插件實(shí)現(xiàn)wordpress雪花飄落效果的四種方法
- JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落
相關(guān)文章
上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
需要一個(gè)用戶上傳頭像預(yù)覽的功能,因此寫(xiě)了一段上傳圖片預(yù)覽JS腳本,Input file圖片預(yù)覽的實(shí)現(xiàn),需要的朋友可以看看2014-10-10Javascript 調(diào)用 ActionScript 的簡(jiǎn)單方法
在Flex中,ActionScript調(diào)用Javascript是比較簡(jiǎn)單的,說(shuō)白了就是,在html里,怎么調(diào)用Javascript,在ActionScript就怎么調(diào)用就可以了。接下來(lái)通過(guò)本文給大家介紹js 調(diào)用 actionscript方法,感興趣的朋友一起看看吧2016-09-09JS前端開(kāi)發(fā)之exec()和match()的對(duì)比使用
match()方法可在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配,下面這篇文章主要給大家介紹了關(guān)于JS前端開(kāi)發(fā)之exec()和match()的對(duì)比使用的相關(guān)資料,需要的朋友可以參考下2022-09-09JavaScript常用基礎(chǔ)知識(shí)強(qiáng)化學(xué)習(xí)
這篇文章主要介紹了JavaScript常用基礎(chǔ)知識(shí)強(qiáng)化學(xué)習(xí),需要的朋友可以參考下2015-12-12詳解maxlength屬性在textarea里奇怪的表現(xiàn)
這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關(guān)資料,需要的朋友可以參考下2015-12-12使用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播
在網(wǎng)站開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要展示多張圖片并自動(dòng)切換的需求,這就需要使用JavaScript來(lái)實(shí)現(xiàn)圖片的自動(dòng)輪播功能,本文將通過(guò)一個(gè)簡(jiǎn)單的例子,演示如何用JavaScript實(shí)現(xiàn)圖片的自動(dòng)輪播,感興趣的同學(xué)可以自己動(dòng)手試一試2023-09-09Javascript實(shí)現(xiàn)前端簡(jiǎn)單的路由實(shí)例
本文將使用javascript實(shí)現(xiàn)一個(gè)極其簡(jiǎn)單的路由實(shí)例。WEB開(kāi)發(fā)中路由概念并不陌生,我們接觸到的有前端路由和后端路由。后端路由在很多框架中是一個(gè)重要的模塊,同樣前端路由在單頁(yè)面應(yīng)用也很常見(jiàn),它使得前端頁(yè)面體驗(yàn)更流暢。2016-09-09