Thư viện 1001 chiêu Javascript

Thư viện 1001 chiêu Javascript
Hướng dẫn:
* Dùng phím Ctrl + chuột trái để xem, hoặc tải về
* Những liên kết tải về cứ nhấn” Save
* Những liên kết không phải tải về (SAVE) mà ở dạng html, bạn dùng menu: view -> Source để lấy code. Chúc
các bạn thành công. Phù...phù...phù.
HTTP://maithienchanh.violet.vn hân hạnh đón chào quý khách + thành viên.
- Cây thư mục
Đây là đoạn JavaScript nhỏ giúp bạn tạo một mục lục dạng "cây thư mục" đơn giản.

- Hình ảnh 3D ảo
Đoạn mã giúp tạo hiệu ứng 3D.

- Bộ tìm kiếm đơn giản
Bạn muốn tạo một trang tìm kiếm riêng cho website của mình mà không cần sự hỗ trợ của các website khác,
nhưng bạn chẳng biết tí chút gì về các ngôn ngữ lập trình web như: PHP, ASP, CGI... Vậy xin mời bạn hãy vào
website e-Chip để download bộ tìm kiếm viết bằng JavaScript này về, sau đó theo hướng dẫn bạn có thể tự tạo
cho mình một trang tìm kiếm theo phong cách riêng của bạn.

- Background ấn tượng
Bạn có thể làm trang Web của mình có ảnh nền thật ấn tượng với các bước: chọn một hình nền (chân trời) sẫm
màu, mô phỏng thêm hiệu ứng mưa rơi, và cuối cùng là cho xuất hiện ngẫu nhiên hình tia sét. Chúc bạn thành
công!

- Hiệu ứng Batman
Mời bạn tải chương trình tạo hiệu ứng “batman” về dùng thử. Tương tự các hiệu ứng chuột khác, các chú dơi sẽ
bay lượn quanh vị trí trỏ chuột. Nếu muốn bạn có thể giữ nguyên mã nguồn và thay đổi hình ảnh cho hợp với
trang Web của mình.

- Quay hình

Với một số logo có sẵn, tôi xin giới thiệu đoạn mã xoay vòng các hình ảnh. Bạn thay vđo logo trang Web mnh rồi
đặt vị trí thể hiện ở góc trên trái, sẽ rất đẹp và “huyền bí”, chúc bạn thành công!

- Trắc nghiệm trực tuyến
Bạn cần làm một cuộc trắc nghiệm nho nhỏ để kiểm tra lại kiến thức của mnh ở một vđi lĩnh vực? Mời bạn dùng
thử chương trnh “Trắc nghiệm trực tuyến”. Bạn chỉ cần thay đổi nội dung câu hỏi, đáp án là có thể mời bạn bè
“thi đấu” tính điểm trên trang Web của mnh rồi.

- Ngoài kia... lá rơi đầy
Tương tự như hiệu ứng tuyết rơi, mưa rơi... bạn có thể tạo một hiệu ứng thật đẹp trên trang Web của mình với
những chiếc lá nhiều màu sắc, đủ các kích cỡ. Chương trình có trên Website eChíp mục Thư viện JavaScript cùng
với các file ảnh đi kèm, mời bạn tải về dùng thử.

- Xem vùng tối của Trái Đất
Nếu bạn muốn xem bóng tối đang phủ trên vùng nào của Trái Đất ở thời điểm hiện tại, mời bạn tải chương trình
này về dùng thử. Bạn có thể thay đổi giờ hệ thống để kiểm tra độ chính xác vùng tối trên bản đồ của chưong
trình.

- Các kiểu menu
Bạn muốn tìm hiểu các kiểu xuất hiện thực đơn, bảng thông báo động khi rê chuột lên trên liên kết? Chương trình
tôi giới thiệu sẽ lướt qua hơn 10 kiểu menu động, trong đó có cả những menu xuất hiện kèm theo hiệu ứng ngẫu
nhiên. Tùy theo mục đích sử dụng và phần thiết kế trang trí của Website, bạn có thể tham khảo để chọn cho
mình hiệu ứng phù hợp.

- Tạo mã HTML tự động
Để thu hút nhiều khách tham quan vào web của bạn hơn thì bạn nên mở thêm một dịch vụ miễn phí nào đó, tôi
xin đề cử dịch vụ thiết kế web. Người lướt Web chỉ cần nhập một vài thông tin là có thể tạo ra một trang Web đơn
giản rồi!

- Hình chuyển động

Có nhiều cách để chuyển động hình trong Website, cũng như với mỗi cách bạn có thể tạo nhiều đường chuyển
động khác nhau. Xin giới thiệu một đoạn Script ngắn tạo chuyển động hình ngẫu nhiên.

- Hiệu ứng chuyển ảnh
Xin giới thiệu cùng các bạn hiệu ứng chuyển tiếp đơn giản mà thật đẹp mắt. Mỗi khi người dùng nhấp chuột vào
nút “Play” thì “Trang 1” và “Trang 2” sẽ được hoán đổi cho nhau. Bạn cũng có thể cài đặt thêm phần tự chuyển
đổi theo thời gian cho trước.

- Màu và mã màu
Đôi lúc bạn tự hỏi chọn màu background cho trang Web của mình như thế nào, và cần đối chiếu hiệu quả giữa
một số màu thông dụng... Mời bạn vào Website e-Chíp tải chương trình về dùng thử. Khi bạn rê chuột lên ô màu
nào thì background sẽ được đổi ngay thành màu đó, đồng thời giá trị số biểu diễn cho màu vừa chọn sẽ hiện ra
bên dưới.

- Đồng hồ theo chuột
Có thể các bạn đã quen thuộc với những dòng chữ hoặc hiệu ứng theo chuột, tôi xin giới thiệu chương trình tạo
đồng hồ di chuyển theo chuột. Bạn có thể thay đổi tùy ý dòng chữ xoay bên ngoài ở phần đầu chương trình.

- Chọn hình nền cho Website
Nếu e ngại những vị khách khó tính không hài lòng với “skin” của trang Web mình, bạn có thể cho phép họ tự
chọn hình nền (background) tùy ý. Mời bạn tải chương trình về dùng thử, sau đó bạn sưu tầm thêm nhiều hình
nền đẹp để bổ sung cho chương trình.

- Tạo bảng đổi đơn vị đo chiều dài
Để có một bảng cho phép chuyển đổi giữa các đơn vị đo chiều dài, bạn chỉ cần vào Website e-CHÍP để tải đoạn
chương trình này về. Nếu cần bạn có thể chỉnh sửa mã nguồn để có nhiều loại đơn vị tính hơn.

- Tạo hiệu ứng album ảnh
Bạn có thể tạo một album ảnh “tự động” lật từng tờ, khi người lướt Web nhấp chuột vào hình ảnh sẽ dẫn đến một
liên kết cụ thể khác ( ở đây tôi đưa người lướt Web đến số báo tương ứng hình trong album).

- Tạo trang giới thiệu ấn tượng
Chương trình cho phép bạn tạo phần giới thiệu thật ấn tượng về nhóm thực hiện trang Web, những dòng chữ này
sẽ được “cuộn” từ dưới lên. Bạn cũng có thể thay đổi nội dung giới thiệu để biến phần này thành những lời quảng
cáo.

- Cẩm nang thời gian cho trang Web
Xin giới thiệu cùng các bạn chương trình JavaScript cho phép tham khảo thời gian ở khắp năm châu. Bạn chỉ cần
chọn tên thành phố từ năm danh sách cho sẵn của chương trình, thời gian sẽ được hiển thị rất nhanh chóng và rõ
ràng.

- Cuộn hình từ dưới lên
Bạn có thể đưa file hình thích hợp vào đoạn mã JavaScript tôi giới thiệu để cuộn hình. Với cách thể hiện này bạn
có thể tự tạo một “banner” cho trang Web của mình.

- Chú thích trên thanh trạng thái
Có nhiều cách giới thiệu nội dung của một liên kết trên Web, mời bạn “xài” thử phương pháp tạo một dòng chú
thích trên thanh trạng thái (khi người lướt Web rê chuột lên trên liên kết).

- Hình nền trên Website
Khi bạn kéo thanh trượt, hình nền vẫn đứng yên tạo cảm giác chuyển động rất mượt và hấp dẫn. Bạn có thể
tham khảo mã nguồn để thay hình ảnh thích hợp hơn cho Website của mình.

- Rung chuyển liên kết
Các hình ảnh liên kết sẽ chuyển động liên hồi khi bạn rê chuột vào khung ảnh. Hiệu ứng này gây sự chú ý đặc
biệt đến người lướt Web và giúp trang Web bạn sinh động hơn.

- Tùy biến màu sắc trang Web
Cho phép người dùng tự chọn màu sắc thể hiện văn bản, màu nền cũng là một điều lý thú phải không bạn? Bạn
có thể thay đổi giao diện khác đi theo ý thích của mình và tăng thêm số màu thể hiện cho phong phú hơn.

- Hồ cá trên Web
Các bạn hẳn đã quen với các hiệu ứng nền động như mưa rơi... sao bạn không vào website e-CHÍP để tải chương
trình này về dùng thử? Chỉ cần kết hợp vài hiệu ứng là bạn có ngay một... hồ cá các loại trên Web rồi!

- Liên kết trên Website
Các liên kết “nóng” thường dùng được đưa vào một khung thể hiện rất tiện lợi và rõ ràng đối với người lướt Web.
Khi rê chuột đến liên kết nào đó, một mũi tên đỏ sẽ nhấp nháy ngay trước liên kết.

- Chữ mờ ảo trên Web
Khi bạn rê chuột lên liên kết, một số dòng chữ ( nội dung tùy ý như lời chú giải, thậm chí dòng quảng cáo,vv...)
sẽ hiện lên mờ ảo, rất nhẹ nhàng mà vẫn gây sự chú ý đối với người lướt Web.

- Menu chuột phải
Bạn đã bao giờ truy cập vào một menu của trang web bằng cách nhấp phải chuột chưa ? Đoạn mã JavaScript sau
đây ứng dụng định vị động của HTML đối với đối tượng lớp (ở đây là 1 menu).

- Tạo lựa chọn dẫn đường cho các liên kết
Có nhiều hình thức để tạo liên kết để dẫn đến các Website khác. Bạn có thể sử dụng menu chuột phải, các liên
kết trực tiếp, vv... Xin giới thiệu cùng các bạn một phương pháp rất dễ dàng và rõ ràng (về mặt giao diện đối với
người sử dụng): cho phép người lướt Web lựa chọn các liên kết, rồi sau đó nhấp chuột vào nút thực hiện.

- Chữ quay nhiều hướng
Các dòng chữ chuyển động bao giờ cũng làm trang web của bạn thêm sinh động và lôi cuốn. Xin giới thiệu cùng
các bạn một hiệu ứng quay chữ nhiều hướng. Bạn có thể thay nội dung dòng chữ rồi đặt trục quay ở góc trên-trái
website là thích hợp nhất.

- Chữ nhảy múa
Hiệu ứng này phù hợp cho việc thiết kế một trang giới thiệu cho website của bạn. Trước hết dòng chữ vừa uốn
lượn vừa di chuyển ngang màn hình, sau đó các ký tự sẽ lần lượt rơi xuống đáy màn hình như một cơn mưa ngập

tràn màu sắc vậy.

- Các dạng Cursor
Đây là một chương trình demo các hình dáng của trỏ chuột, từ đồng hồ cát, bàn tay, dấu hỏi, vv... Các bạn có
thể vào website e-Chíp mục Thư viện JavaScript để tải chuơng trình về dùng thử.

- Hiệu ứng banh rơi
Trái banh sẽ dội xuống đáy màn hình (điểm bắt đầu ở vị trí bạn nhấp chuột) và nảy lên, độ cao giảm dần cho
đến khi chuyển động dừng hẳn. Bạn có thể áp dụng hiệu ứng rất đẹp mắt này cho một dãy các ký tự.

- Menu di chuyển được
Giữa nhiều loại menu trên trang Web, menu di chuyển được có một vị trí “không đụng hàng”. Để bắt đầu di
chuyển menu, bạn nhấp chuột vào thanh tiêu đề, sau đó “thả” menu đến vị trí mới bằng cách nhấp đúp chuột.

- Vẽ biểu đồ
Biểu đồ trong Office thật đơn giản phải không bạn, tuy nhiên tôi muốn giới thiệu với các bạn một cách thể hiện
biểu đồ trên trang Web dùng JavaScript. Các bạn có thể nhập thẳng số liệu vào các ô nhập liệu, sau đó nhấp
chuột vào nút “vẽ”, thế là xong!

- Đồng hồ đeo tay
Đồng hồ gắn trên các website thường là “điện tử” (không có kim) hoặc là dạng đồng hồ “treo tường”, tôi xin giới
thiệu với các bạn một chiếc đồng hồ đeo tay rất dễ thương, ngoài chức năng báo giờ (đương nhiên) nó còn báo
luôn thứ mấy trong tuần, ngày mấy trong tháng...

- Cổ động viên Ai-Ti
Còn đây là cổ động viên nhiệt tình và vô tư nhất, bạn có thể gắn cổ động viên này lên bất kỳ trang web nào. Nếu
muốn cổ vũ lần nữa bạn chỉ cần nhấp chuột vào nút nhấn cạnh hình là xong, lúc này bạn có thể thưởng thức một
màn biểu diễn hoạt ảnh bằng các ký tự ráp lại.

- Xem mã màu

Đây là chương trình cho phép bạn có được mã RGB từ các màu thường gặp, bạn có thể thêm sáng, hoặc cho màu
gốc tối đi. Nếu muốn, bạn cũng có thể gõ trực tiếp các thông số RGB (theo dec hoặc hex) để xem thử hiệu quả
màu mình chọn.

- Đồng hồ JavaScript
Xin giới thiệu cùng các bạn một chiếc đồng hồ có vẻ đẹp rất cổ điển. Bạn hoàn toàn có thể "treo" chiếc đồng hồ
này lên trang Web của mình.

- Ẩn - hiện logo
Cho logo của mình xuất hiện cố định trên Website đôi lúc cũng nhàm chán, bạn có thể thử cho logo bay "lòng
vòng" trên trang quảng cáo. Logo sẽ chợt ẩn chợt hiện nên không làm "rối" tầm nhìn của người lướt Web.

- Tạo hiệu ứng cho liên kết
Bạn có thể thêm nhiều ý nghĩa hơn cho các liên kết bằng cách hiển thị thêm hình và/hoặc logo của Website được
liên kết. Hình ảnh sẽ được hiện ra khi người lướt Web trỏ chuột vào liên kết.

- Dòng chữ xoay quanh con trỏ chuột
Dòng chữ xoay quanh con trỏ chuột là một hiệu ứng phổ biến trên các trang Web và có nhiều cách thực hiện. Nếu
để ý bạn sẽ thấy khi di chuyển chuột thì dòng chữ cũng uốn lượn theo những đường cong đặc trưng (ở các Script
khác nhau).

- Không gian ảo
Tương tự hiệu ứng "mưa rơi". Tuy nhiên, bạn thay đổi hướng di chuyển thành trái-phải hoặc phải-trái, đồng thời
tạo ra các mức tốc độ di chuyển khác nhau (nhằm tạo chiều sâu như không gian 3 chiều, ở tốc độ bằng nhau vật
thể ở gần trông như chuyển động nhanh hơn). Như vậy là trang Web của bạn xem như được đặt vào một không
gian huyền ảo rồi đó.

- Lịch để bàn kết hợp đồng hồ
Nếu trên bàn làm việc có một bộ lịch “khuyến mãi” đồng hồ thì quá thuận tiện phải không các bạn? Mời các bạn
vào website e-Chíp để tải chương trình về.

- Menu động
Menu cho trang web được thiết kế với màu sắc trang nhã, dễ theo dõi. Khi bạn di chuyển chuột đến một mục nào
trong menu, chú gà con - “linh vật” của e-Chíp sẽ bay theo. Bạn chỉ cần tìm một góc thích hợp để trình bày menu
này trên trang web của mình thôi.

- Hồ cá “Java”
Screensaver – trình bảo vệ màn hình đôi khi còn giúp chúng ta có những giây phút thư giãn với các hình ảnh hết
sức tuyệt vời đi kèm. Xin giới thiệu cùng các bạn một “hồ cá” thật dễ thương mô phỏng các Screensaver để
“ngâm cứu”.

- Khung hình di động
Tương tự thủ thuật soi hình, tuy nhiên bạn phải làm cho khung hình trong suốt để tăng độ hấp dẫn. Khách thăm
website của bạn sẽ nhấp và giữ chuột trái, sau đó di chuyển chuột để xem hình ảnh (hay nội dung) bên dưới.

- Đôi mắt lém lỉnh...
Bạn hãy thử tải đoạn JavaScript này về rồi thử xem, khi bạn di chuyển chuột đến đâu, đôi mắt sẽ “liếc” theo đến
đó. Chỉ khi nào bạn di chuyển chuột ra ngoài vùng thể hiện của trang web thì đôi mắt này mới bị “ngoài vùng phủ
sóng” thôi.

- Chữ quay chong chóng
Xin giới thiệu cùng các bạn một hiệu ứng đơn giản: cho một dòng văn bản xoay tròn như chong chóng, với kích
thước to dần. Bạn chỉ nên dùng đoạn mã này khi website bạn có không gian trình bày và bạn muốn nó thêm
phần sinh động.

- Rồng vàng
Bạn có bao giờ thấy một đoạn text bay lượn trên trang web trông như chú “Rồng Vàng” chưa? Mời các bạn vào
website e-Chíp mục Thư viện JavaScript để lấy chương trình này về. Rất đẹp mắt đó bạn.

- Liên kết... đẹp như trong phim

Đoạn mã JavaScript được sử dụng để truyền các thông số cho một JavaApplet, các liên kết di chuyển trông như
đoạn phim đang chiếu. Hiệu quả thật tuyệt vời phải không các bạn? Mã nguồn ngắn gọn và rất đơn giản, bạn chỉ
cần thay đổi các liên kết cho phù hợp với website của mình.

- Tạo hiệu ứng cho liên kết
”Dân” làm web luôn cố gắng gây ấn tượng đối với khách tham quan “ngôi nhà” trên mạng của mình. Do đó các
hình ảnh và liên kết thường được chăm chút kỹ để tạo nét hấp dẫn riêng. Xin giới thiệu cùng bạn một chiêu: “nổ
tung” tên liên kết bay ra thành nhiều hướng khi trỏ chuột vào nó.

- Thế giới quay
Xin giới thiệu cùng các bạn một bản đồ “kỹ thuật số” hấp dẫn. Muốn phóng to hay thu nhỏ bạn chỉ cần nhấp