Một hiệu ứng pháo hoa khá vui và trong lạ mắt bằng JavaScript, đúng là luôn luôn có nhưng sáng tạo trong cuộc sống :)) Mẫu này thích hợp làm header để trình bày cho website.
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Effect Source:
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Effect Source:
-----------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="overflow: hidden;" bgcolor="#000000">
<script language="JavaScript">
CL = new Array('#ff0000', '#00ff00', '#ffffff', '#ff00ff', '#ffa500', '#ffff00', '#00ff00', '#ffffff', '#ff00ff')
CL2 = new Array('#ffa500', '#00ff00', '#FFAAFF', '#fff000', '#fffffF')
Xpos = 130;
Ypos = 130;
I = '#00ff00';
C = 0;
S = 5;
H = null;
W = null;
Y = null;
NS4 = (document.layers);
NS6 = (document.getElementById && !document.all);
IE4 = (document.all);
A = 14;
E = 120;
L = null;
if (NS4) {
for (i = 0; i < A; i++)
document.write('<LAYER NAME="nsstars' + i + '" TOP=0 LEFT=0 BGCOLOR=' + I + ' CLIP="0,0,2,2"></LAYER>');
}
if (NS6) {
window.document.body.style.overflow = 'hidden';
for (i = 0; i < A; i++)
document.write('<div id="ns6stars' + i + '" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:' + I + '"></div>');
}
if (IE4) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < A; i++)
document.write('<div id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:' + I + ';font-size:2px"></div>');
document.write('</div></div>');
}
function Fireworks() {
H = (NS4 || NS6) ? window.innerHeight : window.document.body.clientHeight;
W = (NS4 || NS6) ? window.innerWidth : window.document.body.clientWidth;
Y = (NS4 || NS6) ? window.pageYOffset : window.document.body.scrollTop;
for (i = 0; i < A; i++) {
if (IE4) L = iestars[i].style;
if (NS4) L = document.layers["nsstars" + i];
if (NS6) L = document.getElementById("ns6stars" + i).style;
var F = CL[Math.floor(Math.random() * CL.length)];
var RS = Math.round(Math.random() * 2);
L.top = Ypos + E * Math.sin((C + i * 5) / 3) * Math.sin(C / 100)
L.left = Xpos + E * Math.cos((C + i * 5) / 3) * Math.sin(C / 100)
if (C < 110) {
if (NS4) {
L.bgColor = I;
L.clip.width = 1;
L.clip.height = 1
}
if (IE4 || document.getElementById) {
L.background = I;
L.width = 1;
L.height = 1;
L.fontSize = 1
}
} else {
if (NS4) {
L.bgColor = F;
L.clip.width = RS;
L.clip.height = RS
}
if (IE4 || document.getElementById) {
L.background = F;
L.width = RS;
L.height = RS;
L.fontSize = RS
}
}
}
if (C > 220) {
C = 0;
var NC = CL2[Math.floor(Math.random() * CL2.length)];
I = NC;
E = Math.round(100 + Math.random() * 90);
Ypos = E + Math.round(Math.random() * (H - (E * 2.2))) + Y;
Xpos = E + Math.round(Math.random() * (W - (E * 2.2)));
}
C += S;
setTimeout("Fireworks()", 10);
}
Fireworks();
</script>
</body>
</html>
-----------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style="overflow: hidden;" bgcolor="#000000">
<script language="JavaScript">
CL = new Array('#ff0000', '#00ff00', '#ffffff', '#ff00ff', '#ffa500', '#ffff00', '#00ff00', '#ffffff', '#ff00ff')
CL2 = new Array('#ffa500', '#00ff00', '#FFAAFF', '#fff000', '#fffffF')
Xpos = 130;
Ypos = 130;
I = '#00ff00';
C = 0;
S = 5;
H = null;
W = null;
Y = null;
NS4 = (document.layers);
NS6 = (document.getElementById && !document.all);
IE4 = (document.all);
A = 14;
E = 120;
L = null;
if (NS4) {
for (i = 0; i < A; i++)
document.write('<LAYER NAME="nsstars' + i + '" TOP=0 LEFT=0 BGCOLOR=' + I + ' CLIP="0,0,2,2"></LAYER>');
}
if (NS6) {
window.document.body.style.overflow = 'hidden';
for (i = 0; i < A; i++)
document.write('<div id="ns6stars' + i + '" style="position:absolute;top:0px;left:0px;height:2px;width:2px;font-size:2px;background:' + I + '"></div>');
}
if (IE4) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < A; i++)
document.write('<div id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:' + I + ';font-size:2px"></div>');
document.write('</div></div>');
}
function Fireworks() {
H = (NS4 || NS6) ? window.innerHeight : window.document.body.clientHeight;
W = (NS4 || NS6) ? window.innerWidth : window.document.body.clientWidth;
Y = (NS4 || NS6) ? window.pageYOffset : window.document.body.scrollTop;
for (i = 0; i < A; i++) {
if (IE4) L = iestars[i].style;
if (NS4) L = document.layers["nsstars" + i];
if (NS6) L = document.getElementById("ns6stars" + i).style;
var F = CL[Math.floor(Math.random() * CL.length)];
var RS = Math.round(Math.random() * 2);
L.top = Ypos + E * Math.sin((C + i * 5) / 3) * Math.sin(C / 100)
L.left = Xpos + E * Math.cos((C + i * 5) / 3) * Math.sin(C / 100)
if (C < 110) {
if (NS4) {
L.bgColor = I;
L.clip.width = 1;
L.clip.height = 1
}
if (IE4 || document.getElementById) {
L.background = I;
L.width = 1;
L.height = 1;
L.fontSize = 1
}
} else {
if (NS4) {
L.bgColor = F;
L.clip.width = RS;
L.clip.height = RS
}
if (IE4 || document.getElementById) {
L.background = F;
L.width = RS;
L.height = RS;
L.fontSize = RS
}
}
}
if (C > 220) {
C = 0;
var NC = CL2[Math.floor(Math.random() * CL2.length)];
I = NC;
E = Math.round(100 + Math.random() * 90);
Ypos = E + Math.round(Math.random() * (H - (E * 2.2))) + Y;
Xpos = E + Math.round(Math.random() * (W - (E * 2.2)));
}
C += S;
setTimeout("Fireworks()", 10);
}
Fireworks();
</script>
</body>
</html>
-----------------------------
No comments:
Post a Comment