Tạo Một chuỗi các ngôi sao bay theo Mouse
- Bạn đã bao giờ nhìn thấy một chuỗi các ngôi sao bay theo mouse
như trang web này chưa? Vâng, đây chính là hiệu ứng được mang lại
từ những chuỗi câu lệnh JavaScript được nhúng vào trang web này,
nó được kết hợp với 6 images để tạo nên một hiệu ứng rất
tuyệt vời như bạn đang thấy đó. Nó biết phải ẩn đi khi mouse
không hoạt động và hoạt động trở lại khi mouse di chuyển. Khi
mới nhìn bạn tưởng chừng như mouse là một chiếc đũa thần đang
vẫy ra những vì sao vậy! Chính những hiệu ứng nhỏ như
vậy, làm cho trang web chúng ta đỡ nhàm chán, tăng thêm phần hương
vị.
- Bạn hãy copy đoạn mã bên dưới và dán vào Notepad, lưu lại thành đuôi .htm hoặc html để phân tích, ngoài ra bên dưới tôi còn để Download 01, 02, 03, 04, 05, 06 là 6 ngôi sao nếu muốn bạn có thể download ngay tại trang web này, nhưng lưu ý là bạn phải đặt nó trong 1 thư mục có tên là Images, bên ngoài thư mục đó là trang web có chứa đoạn mã bên dưới.
1. Ưu điểm của việc nhúng trực tiếp Java Script vào webpage:
Đó là tạo nên sự sinh động thực sự cho webpage của bạn, làm cho khách đến thăm không cảm thấy nhàm chán. Nếu bạn sử dụng đúng những câu lệnh bên dưới khi bạn đưa mouse sát mép phải của màn hình thì chỉ xuất hiện thanh trượt ngang 1 ít xíu, có những chương trình khác hiệu ứng theo mouse nhưng khi đưa mouse ra sát mép phải của màn hình thì nó kéo theo thanh trượt ngang đi theo nó rất là dài, trong khi đó 1 trang web tốt, điều cấm kỵ của nó là không được xuất hiện thanh trượt ngang trên màn hình.
2. Khuyết điểm:
Câu lệnh dài quá khiến trang web này trở nên hơi bị nặng, bạn chỉ có thể dùng cho những trang chủ có kích thước nhỏ, ít images thì có thể cho vào được.
<HTML>
<HEAD>
<TITLE>Hieu u'ng JavaScript - Le Quang Anh Hu'ng</TITLE>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-user-defined">
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<META content="Le Quang Anh Hu'ng Homepage" name=Author>
<SCRIPT language=JavaScript>
<!--Che dấu những trình duyệt mà không biết JavaScript (ở đây sử dụng câu lệnh If và else if)
var version = 0;
if (navigator.userAgent.indexOf("MSIE 4") != -1) version = 5;
else if (navigator.userAgent.indexOf("MSIE 3") != -1) version = 1;
else if (navigator.userAgent.indexOf("Mozilla/4") != -1) version = 4;
else if (navigator.userAgent.indexOf("Mozilla/4.5") != -1) version = 7;
else if (navigator.userAgent.indexOf("Mozilla/3") != -1) version = 3;
else if (navigator.userAgent.indexOf("Mozilla/2") != -1) version = 2;
else if (navigator.userAgent.indexOf("MSIE 4.5") != -1) version = 6;
else version = 8;
// -->
</SCRIPT>
<STYLE> <!-- Nơi đây dùng để tạo mẫu kích thước, vị trí cho Images(6 ngôi sao)--> #trailsprite1 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 1px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 100
}
#trailsprite2 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
#trailsprite3 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
#trailsprite4 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
#trailsprite5 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
#trailsprite6 {
HEIGHT: 10px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10
}
</STYLE>
</HEAD>
<BODY bgColor=#000000> <!-- chỉ màu nền background color -->
<SCRIPT language=JavaScript1.1>
if (version > 3) <!-- Nếu ver > 3 (JavaScript) khi đó sẽ xuất ra màn hình bức ảnh thứ 1 và thứ tự tiếp theo ứng với mỗi images bao gồm chiều cao, viền, tên, Id -->
document.write('<div id="trailSprite1"><img src="images/trailgif1.gif"height="10"width="10"border="0"name="trailSprite1img"></div><div id="trailSprite2"><img src="images/trailgif2.gif"height="10"width="10"border="0"name="trailSprite2img"></div><div id="trailSprite3"><img src="images/trailgif3.gif"height="10"width="10"border="0"name="trailSprite3img"></div><div id="trailSprite4"><img src="images/trailgif4.gif"height="10"width="10"border="0"name="trailSprite4img"></div><div id="trailSprite5"><img src="images/trailgif5.gif"height="10"width="10"border="0"name="trailSprite5img"></div><div id="trailSprite6"><img src="images/trailgif6.gif"height="10"width="10"border="0"name="trailSprite6img"></div>')
</SCRIPT>
<SCRIPT language=JavaScript> <!-- Nơi dòng lệnh này hỗ trợ cho trình duyệt Netscape không có cũng chẳng sao -->
<!--
NS4 = (("Netscape"==navigator.appName) && ("4"<=parseInt(navigator.appVersion)))
window.name = "right" <!-- Bạn phải cẩn thận ngay chổ chữ "right" đây là chỗ nguy hiểm chết người nếu bạn không để ý frames của bạn sẽ sổ tầm bậy liền đó, chính vì vậy bạn ấn định để sổ frames tên gì thì phải đặt tên đó à nghe! -->
// -->
</SCRIPT>
<SCRIPT language=Javascript1.1>
<!--
var isNS = (navigator.appName == "Netscape");
layerRef = (isNS) ? "document" : "document.all";
styleRef = (isNS) ? "" : ".style";
var queue = new Array();var NUM_OF_TRAIL_PARTS = 6
for (x=1; x < 7; x++)
{ ///////////////Image Preload
eval("trailSpriteFrame" + x + "=new Image(10,10);");
eval("trailSpriteFrame" + x + ".src='images/trailgif"+x+".gif';");
}////////////////////////////////////////////////Đối tượng vệt ngôi sao chạy theo mouse
function trailSpriteObj(anID)
{
this.trailSpriteID = "trailSprite" + anID; //Tùy đằng trước
this.imgRef = "trailSprite" + anID + "img"; //Chuyển tới tên những ngôi sau
this.currentFrame = 1; //nhìn thấy khung
this.animateTrailSprite = animateTrailSprite; //Khai báo phương pháp vòng lặp đối tượng
}
function animateTrailSprite()
{
if (this.currentFrame <7)
{// Nếu có hoạt cảnh (mà) những khung rời bỏ, thay đổi những ngôi sao kết cấu hiện thời
if (isNS)
{ //Phát hiện ra bộ duyệt và thực hiện sự chuyển đổi hình ảnh
eval("document['"+this.imgRef+"'].src=trailSpriteFrame" + this.currentFrame + ".src");
}
else
{
eval("document['"+this.imgRef+"'].src=trailSpriteFrame" + this.currentFrame + ".src");
}
this.currentFrame ++; //và tăng thêm hiện thời những đối tượng hình ảnh
}
else
{ //Khung hiện hành như vậy đạt đến giới hạn nó che dấu ngôi sao
eval(layerRef + '.' + this.trailSpriteID + styleRef + '.visibility="hidden"');
}
}/////////////////////////////////////////////////////////////////
function processAnim()
{
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}
function processMouse(e)
{
currentObj = shuffleQueue();
if (isNS)
{
eval("document." + currentObj + ".left=e.pageX-0;");
eval("document." + currentObj + ".top=e.pageY+5;");
}
else
{
eval("document.all." + currentObj + ".style.pixelLeft=event.clientX+document.body.scrollLeft-0;");
eval("document.all." + currentObj + ".style.pixelTop=event.clientY+document.body.scrollTop+5;");
}
}
function shuffleQueue()
{
lastItemPos = queue.length - 1;
lastItem = queue[lastItemPos];
for (i = lastItemPos; i>0; i--)
queue[i] = queue[i-1];
queue[0] = lastItem;
queue[0].currentFrame = 1; //sự sắp đặt lại số thứ tự hình ảnh của những đối tượng & làm cho ngôi sao rõ ràng thêm
eval(layerRef + '.' + queue[0].trailSpriteID + styleRef + '.visibility="visible"');
return queue[0].trailSpriteID;
}
function init()
{
for(x=0; x<NUM_OF_TRAIL_PARTS; x++) //Sắp hàng đầy đủ vệt dài của đối tượng
queue[x] = new trailSpriteObj(x+1) ;
if (isNS)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = processMouse;
setInterval("processAnim();",25);
}
if (version > 3)
window.onload = init;
// -->
</SCRIPT>
</body>
</html>
<!-- --------------------------------------------Kết thúc-------------------------------------------------- -->
Download 01, 02, 03, 04, 05, 06
Vui lòng góp ý về bài viết này xin liên hệ:
Lê Quang Anh Hu'ng
135T3 Tran Van Dang Street, District 3, Ho Chi Minh City, Vietnam.
E-Mail: lehunghp@yahoo.com hoặc ahung@hcmpt.vnn.vn
Homepage: http://www.crosswinds.net/~lqahung/
Chúc Bạn & Gia Đình nhiều sức khỏe.
PcLeHoan
1996 - 2002
Mirror :
http://www.pclehoan.com
Mirror :
http://www.lehoanpc.net
Mirror :
http://www.ktlehoan.com
