PDA

Xem đầy đủ chức năng : Ngôi sao nổ



JavaScriptBank
22-03-2010, 06:28 PM
Mô phỏng hiệu ứng pháo bông (http://www.javascriptbank.com/title=pháo bông) với hình ảnh (http://www.javascriptbank.com/javascript/image/) là các ngôi sao (http://www.javascriptbank.com/vi=ngôi sao) bắn lên chi tiết (http://www.javascriptbank.com/javascript/... http://www.javascriptbank.com/javascript.images/multimedia/vml-fireworks-script.jpg (http://www.javascriptbank.com/javascript/multimedia/events/vml-fireworks-script/preview/vi/)
Demo: JavaScript Ngôi sao nổ (http://www.javascriptbank.com/vml-fireworks-script.html/vi/)
| JavaScript VML fireworks script (http://www.javascriptbank.com/vml-fireworks-script.html)[/CENTER]

Cách cài đặt

Bước 1: Dùng mã CSS bên dưới cho việc định dạng hiệu ứng
CSS

<STYLE type=text/css>BODY {
OVERFLOW-X: hidden
}
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->


Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

<!--[if IE ]>
<SCRIPT language=JavaScript>
// VML fireworks script By Jacco IJzerman , [email protected]
//Customize fireworks colors:
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('lime', 'green')
colors[2] = new Array('lime', 'blue');
colors[3] = new Array('lightyellow', 'purple');
colors[4] = new Array('lightblue', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');

maximum = 1000;

vmlobj='';
for(i = 0; i < 12; i++){
vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
vmlobj += '<v:stroke on="false" /></v:shape></div>';
}
document.write(vmlobj); vmlobj = null;

aantal = 0;

function begin()
{
try {
if(aantal == maximum){ return;}
kleurschema = Math.floor(Math.random() * colors.length);
posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
posLinks = (posLinks < 170)? 170: posLinks;
posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
posBoven = (posBoven < 170)? 170: posBoven;
straal = 0; uiteen = true; teller = 1; flikkereffect = false;
for(var i = 0; i < 12; i++){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
document.getElementById('ster'+i).style.left = posLinks;
document.getElementById('ster'+i).style.top = posBoven;
}
document.getElementById('ster0').style.top = (document.body.clientHeight - 20);
document.getElementById('ster0').style.visibility = 'visible';
omhoog();
} catch(e){}
}

function omhoog()
{
try {
positie = parseInt(document.getElementById('ster0').style.to p);
if(positie > posBoven){
document.getElementById('ster0').style.top = (positie - 25);
setTimeout('omhoog()', 50);
} else {
for(i = 1; i < 12; i++){
document.getElementById('ster'+i).style.top = positie;
document.getElementById('ster'+i).style.visibility = 'visible';
}
uiteenspatten();
}
} catch(e){}
}

function uiteenspatten()
{
try {
if(straal > 120 && straal % 10 == 0){
flikkereffect = true;
teller = (teller == colors[kleurschema].length)? 0: (teller+1);
}
for(var i = 0; i < 12; i++){
var hoek = i * 30;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = posLinks + Math.round(straal * Math.sin(piHoek));
var boven = positie + Math.round(straal * Math.cos(piHoek));
document.getElementById('ster'+i).style.left = links;
document.getElementById('ster'+i).style.top = boven;
if(flikkereffect){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
}
}
if(straal < 160 && uiteen){
straal += (straal < 120)? 10: 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal > 120){
uiteen = false; straal -= 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal <= 120){
for(var i = 0; i < 12; i++){
document.getElementById('ster'+i).style.visibility = 'hidden';
}
aantal++;
setTimeout('begin()', 500);
}
} catch(e) {}
}

window.onload=begin;

</SCRIPT><![endif]-->
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->




Các hiệu ứng tương tự
- Sao chép vào clipboard bằng Flash (http://www.javascriptbank.com/copy-to-clipboard-using-flash.html/vi/)
- Sao chép dữ liệu ra trang (http://www.javascriptbank.com/copy-to-page.html/vi/)
- Hệ thống đánh giá bằng ngôi sao (http://www.javascriptbank.com/rating-star-system-index.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Multimedia (http://www.javascriptbank.com/javascript/multimedia/vi/) và Sự kiện (http://www.javascriptbank.com/javascript/multimedia/events/vi/)





Trình chơi nhạc giao diện iPod
(http://www.javascriptbank.com/ipod-player-using-flash.html/vi/) - JavaSript kiểm tra số điện thoại hợp lệ (http://www.javascriptbank.com/vi=kiểm tra điện thoại) - [URL=""]