* Login   * Register


Last visit was:
It is currently Mon Jul 23, 2018 6:44 pm
View unanswered posts
View active topics





Post new topic Reply to topic  [ 2 posts ] 
Author Message
 Post subject: Tạo Một chuỗi các ngôi sao bay theo Mouse
PostPosted: Sun May 31, 2009 3:06 pm 
Offline

Joined: Thu Feb 05, 2009 11:45 am
Posts: 11
---------
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------------------------ -->


Report this post
Top
 Profile E-mail  
Reply with quote  
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 


Who is online

Users browsing this forum: No registered users and 0 guests


You can post new topics in this forum
You can reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron

Create Forum · php-BB© · Internationalization Project · Report abuse · Terms Of Use/Privacy Policy
© Forums-Free.com 2009