11. Cũng chữ chạy theo con trỏ, chữ này có bóng
- Code:
<script LANGUAGE="Javascript">
<!-- Original: ThangBomBH (thangbom_bh@yahoo.com) -->
<!-- Web Site: http://thangbombh.sg.st -->
<!-- This script and many more are available free online at -->
<!-- The Javascript Source!! http://thangbombh.sg.st -->
<!-- Begin
message = 'Welcome to ThangBomBH Homepages !';
FonT = 'Verdana';
ColoR = '999999';
SizE = 3; //1 to 7 only!
var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;
if (document.layers) {
for (i = 0; i < amount; i++) {
document.write('<layer name=nsl'+i+' top=0 left=0><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></layer>');
}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt) {
xpos = evnt.pageX + 20;
ypos = evnt.pageY + 20;
}
window.onMouseMove = nsmouse;
}
else if (document.all) {
document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i = 0; i < amount; i++) {
document.write('<div id="text"'+i+' style=& quot;position:absolute;top:0px;left:0px;
width:400px;height:20px"><font face='+FonT+' size='+SizE+' color='+ColoR+'>'+message+'</font></div>')
}
document.write("</div>");
document.write("</div>");
function iemouse() {
ypos = event.y + 20;
xpos = event.x + 20;
}
window.document.onmousemove = iemouse;
}
function makefollow() {
if (document.layers) {
document.layers['nsl'+0].top = ay;
document.layers['nsl'+0].left = ax;
document.layers['nsl'+1].top = by;
document.layers['nsl'+1].left = bx;
document.layers['nsl'+2].top = cy;
document.layers['nsl'+2].left = cx;
document.layers['nsl'+3].top = Dy;
document.layers['nsl'+3].left = Dx;
document.layers['nsl'+4].top = Ey;
document.layers['nsl'+4].left = Ex;
}
else if (document.all) {
outer.style.pixelTop = document.body.scrollTop;
text[0].style.pixelTop = ay;
text[0].style.pixelLeft = ax;
text[1].style.pixelTop = by;
text[1].style.pixelLeft = bx;
text[2].style.pixelTop = cy;
text[2].style.pixelLeft = cx;
text[3].style.pixelTop = Dy;
text[3].style.pixelLeft = Dx;
text[4].style.pixelTop = Ey;
text[4].style.pixelLeft = Ex;
}
}
function move() {
ey = Ey += (ypos - Ey) * 0.2;
ex = Ex += (xpos - Ex) * 0.2;
dy = Dy += (ey - Dy) * 0.3;
dx = Dx += (ex - Dx) * 0.3;
cy = Cy += (dy - Cy) * 0.4;
cx = Cx += (dx - Cx) * 0.4;
by = By += (cy - By) * 0.5;
bx = Bx += (cx - Bx) * 0.5;
ay = Ay += (by - Ay) * 0.6;
ax = Ax += (bx - Ax) * 0.6;
makefollow();
setTimeout('move()', 10);
}
window.onload=move;
// End -->
</script>
<!-- script Size: 2.91 KB -->
12. 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.
nên cân nhắc khi làm nghe. hy`hy`
- Code:
<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"></div><div id="trailSprite2"></div><div id="trailSprite3"></div><div id="trailSprite4"></div><div id="trailSprite5"></div><div id="trailSprite6"></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. scro llLeft-0;");
eval("document.all." + currentObj + ".style.pixelTop=event.clientY+document.body.s crol lTop+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>
13. Tạo Một Trận Sao Rơi Bằng Javascript
Ở đây tôi mạn phép dùng ánh sao vì bông tuyết tôi không có, nếu bạn có bông tuyết cho vào, tất nhiên bông tuyết phải lớn hơn sao nhiều và thay nền đen thành nền trắng thì sẽ trở nên một trận Tuyết rơi rồi đó.
Bạn thấy tuyết rơi bao giờ chưa, riêng tôi thì chỉ được nhìn thấy trên màn hình TV. Những bông tuyết rơi ngoài trời ở các nước theo tôi nghĩ chắc là.đẹp lắm, Tôi hy vọng một ngày nào đó khi tàu của tôi ghé thăm một cảng nào đó có tuyết rơi chắc cũng phần nào đó an ủi. Vậy làm sao để tạo một trận tuyết rơi rầm rộ trên màn hình, khi nó rơi gần đến cuối màn hình thì từ từ biến mất. Những trận tuyết rơi như vậy thường diễn ra vào mùa đông (Giáng Sinh) khi nào sắp đến mùa đông bạn hãy trang hoàn cho trang web của bạn có cảnh tuyết đang rơi như vậy thì rất mới lạ và.đẹp mắt nữa chứ, phải không các bạn?
Các bạn hãy nhúng đoạn Java script bên dưới vào trang web của bạn đồng thời kết hợp với 1 image. Mức độ tương thích trình duyệt rất tốt, nó có thể tương thích với cả 2 trình duyệt Internet Explorer & Netscape Navigator. Bạn hãy copy đoạn Java script dán vào Notepad sau đó lưu lại thành file có đuôi .htm hoặc .html.
Các bạn lưu ý: Khi tạo 1 image này các bạn cần tạo image này càng nhẹ nhàng chừng nào thì bông tuyết gơi càng nhẹ nhàng và uyển chuyển chừng đó, image này phải đạt mức độ trong suốt, kích thước bức ảnh càng nhỏ thì càng đỡ phải che mất chữ của bạn
- Code:
<html>
<head>
<title>Hieu Ung Javascript Tuyet Dang Roi - Le Hu'ng Homepage</title>
</head>
<body>
<center>
<script LANGUAGE="Javascript1.2">
<!-- Begin
var no = 25; // Số tuyết
var speed = 10; // Số càng nhỏ tuyết di chuyển(rơi) càng nhanh
var snowflake = "images/idcs.gif"; // Nơi đây chèn hình bông tuyết
var ns4up = (document.layers) ? 1 : 0; // Bộ duyệt tìm nạp vào
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // tọa độ và những vị trí thay đổi
var am, stx, sty; // Độ rộng và những bước thay đổi
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // những biến đổi toạ độ tập hợp
xp[i] = Math.random()*(doc_width-50); // tập hợp những thay đổi vị trí
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // tập hợp những thay đổi độ rộng
stx[i] = 0.02 + Math.random()/10; // tập hợp những thay đổi bước
sty[i] = 0.7 + Math.random(); //tập hợp những thay đổi bước
if (ns4up) { // những lớp tập hợp
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}
function snowNS() { // hàm Netscape hoạt cảnh chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE() { // hàm IE hoạt cảnh chính
for (i = 0; i < no; ++ i) { // vòng lặp cho mỗi điểm
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowIE()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
// End -->
</script>
</body>
</html>
-";
