DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript煙花效果(二)
JavaScript煙花效果(二)
編輯:關於JavaScript     
效果查看:http:///keleyi/phtml/jstexiao/2.htm

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript煙花效果(二)-</title>
<script type="text/javascript">
/* http:// */
var yanhua = "yanhua.";
var firework = function () {
this.size = 40;
this.speed = 0.1;
this.rise();
}
firework.prototype = {
color: function () {
var c = ['0', '3', '6', '9', 'c', 'f'];
var t = [c[Math.floor(Math.random() * 100) % 6], '0', 'f'];
t.sort(function () { return Math.random() > 0.5 ? -1 : 1; });
return '#' + t.join('');
},
aheight: function () {
var h = document.documentElement.clientHeight;
return Math.abs(Math.floor(Math.random() * h - 200)) + 201;
},
firecracker: function () {
var b = document.createElement('div');
var w = document.body.clientWidth;
b.style.color = this.color();
b.style.position = 'absolute';
b.style.bottom = 0;
b.style.left = Math.floor(Math.random() * w) + 1 + 'px';
document.body.appendChild(b);
return b;
},
rise: function () {
var o = this.firecracker();
var n = this.aheight();
var speed = this.speed;
var e = this.expl;
var s = this.size;
var k = n;
var m = function () {
o.style.bottom = parseFloat(o.style.bottom) + k * speed + 'px';
k -= k * speed;
if (k < 2) {
clearInterval(clear);
e(o, n, s, speed);
}
}
o.innerHTML = '*';
if (parseInt(o.style.bottom) < n) {
var clear = setInterval(m, 20);
}
},
expl: function (o, n, s, speed) {
var R = n / 3;
var Ri = n / 6;
var r = 0;
var ri = 0;
for (var i = 0; i < s; i++) {
var span = document.createElement('span');
var p = document.createElement('p');
span.style.position = 'absolute';
span.style.left = 0;
span.style.top = 0;
span.innerHTML = '*';
p.style.position = 'absolute';
p.style.left = 0;
p.style.top = 0;
p.innerHTML = '+';
o.appendChild(span);
o.appendChild(p);
}
function spr() {
r += R * speed;
ri += Ri * speed / 2;
sp = o.getElementsByTagName('span');
p = o.getElementsByTagName('p');
for (var i = 0; i < sp.length; i++) {
sp[i].style.left = r * Math.cos(360 / s * i) + 'px';
sp[i].style.top = r * Math.sin(360 / s * i) + 'px';
p[i].style.left = ri * Math.cos(360 / s * i) + 'px';
p[i].style.top = ri * Math.sin(360 / s * i) + 'px';
}
R -= R * speed;
if (R < 2) {
clearInterval(clearI);
o.parentNode.removeChild(o);
}
}
var clearI = setInterval(spr, 20);
}
}
window.onload = function () {
function happyNewYear() {
new firework();
} if (yanhua === 'yanhua.ke' + 'leyi.' + 'com')
setInterval(happyNewYear, 400);
}
</script>
</head>
<body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif">
<div style="color:red;height:140px;width:800px;margin:0px auto;"><h2>節日的煙花(二)·</h2><div><script type="text/javascript" src="/kineryi/js/gggg728x90a.js"></script><a href="http:///a/bjac/e45ghtrx.htm" target="_blank">原文</a></div></div>
</body>
</html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved