JavaScript mới nhất: Chuyển ảnh

JavaScript xoay ảnh với CANVAS trong HTML5

1303714962

Xoay ảnh với JavaScript không phải loại hiệu mới trên jsB@nk bởi chúng đã từng được giới thiệu thông qua rất đoạn mã JavaScript như: - Quay một đối tượng mà không cần ảnh - Thế giới quay - Ảnh quay Tuy nhiên để bắt kịp với xu hướng của bạn bè trên khắp thế giới, jsB@nk muốn giới thiệu với bạn thêm một hiệu ứng JavaScript xoay ảnh nữa, nhưng được xây dựng trên nền HTML5 với tập lệnh canvas. Đoạn mã JavaScript xoay ảnh này khá đơn giản để bạn có thể nắm bắt cách thức sử dụng thư viện canvas trong HTML5 với các phương thức như: setAttribute, getContext, drawImage và rotate.

Đổi ảnh khi rê chuột

1170117175

Một đoạn mã JavaScript khác dùng để đổi ảnh khi người dùng rê con trỏ chuột đến. Trong hiệu ứng JavaScript này, thay vì dùng cách thông thường, đoạn mã JavaScript thiết lập thuộc tính mới oversrc chứa đường dẫn ảnh cần đổi.

Chuyển ảnh tự động

1170117174

Một đoạn mã JavaScript JavaScript khác để chúng ta có thể đổi ảnh liên tục trong khoảng thời gian nào đó.

Slideshow với bộ lọc

1170116128

Đoạn mã này dùng bộ lọc mờ dần của IE để tạo hiệu ứng trình diễn ảnh trên trang web. Bạn cần có IE5.5+ để thấy được hiệu ứng chuyển cảnh, mặc dù chức năng đổi ảnh làm việc trong tất cả trình duyệt.

Hiệu ứng chuyển ảnh

1170116119

Hiệu ứng JavaScript này sẽ chuyển đổi ảnh sau một khoảng thời gian xác định. Bạn có thể áp dụng hiệu ứng JavaScript này với nhiều hình ảnh và liên kết như bạn muốn.

Ảnh thay đổi khi rê chuột

1170116114

Hiệu ứng tạo ra ba trạng thái ảnh trên trang web: ảnh lúc bình thường, khi người dùng rê chuột đến và khi được nhấn.

Ảnh cát đổ theo hai chiều

1170115987

Hiệu ứng trình bày ảnh theo nguyên tắc hiển thị từng điểm ảnh theo hai chiều từ trái sang phải và ngược lại.

Trình diễn ảnh ba chiều

1170115972

Hiệu ứng tạo một trình diễn ảnh ba chiều qua một hình cầu, hai mặt của quả cầu sẽ lần lượt đổi các ảnh khác nhau.

Cuộn ảnh với hiệu ứng mờ

1170115971

Hiệu ứng tạo một trình diễn ảnh theo chiều từ phải sang trái với hai đầu bị làm mờ dần, khi ta rê con trỏ chuột đến thì ảnh ngừng di chuyển.

Chuyển ảnh mờ dần

1170115969

Đoạn mã JavaScript tạo một trình chuyển ảnh theo nguyên tắc các ảnh xuất hiện và biến mất với hiệu ứng mờ dần. Một hiệu ứng rất tuyệt và được rất nhiều trang web sử dụng hiện nay.