Hướng dẫn javascript animation - hoạt hình javascript
|
Để tạo chuyển động cho đối tượng, bạn có thể làm bằng nhiều cách như sử dụng CSS3, Jquery, hoặc các framework animation đầy rẫy trên mạng :D. Hôm nay Demos Việt Nam sẽ hướng dẫn bạn cách tạo chuyển động đơn giản nhất bằng 1 vài lệnh jquery đơn giản. Show
Đầu tiên, chúng ta tạo html đơn giản cho đối tượng trước: Tiếp theo là một tí CSS #divsanta{
position: absolute;
left: 0;
bottom: 0;
}Sau đó áp dụng jquery bằng hàm đơn giản như sau: var windowW = window.innerWidth - 270;
// 270 là chiều dài của tấm hình
//Di chuyển đối tượng từ trái sang phải
function moveRight(){
$("#divsanta").animate({left: "+="+windowW}, 15000, moveLeft)
}
//Di chuyển đối tượng từ phải sang trái
function moveLeft(){
$("#divsanta").animate({left: "-="+windowW}, 15000, moveRight)
}
$(document).ready(function() {
//Bắt đầu chạy thôi :D
moveRight();
});Cùng xem thành quả nhé :D Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:
Dưới đây là ví dụ đơn giản minh họa rollover hình ảnh với một Mouse Event. Chúng ta cùng quan sát những gì đang được sử dụng trong ví dụ này: Tại thời điểm tải trang này, lệnh if kiểm tra cho sự tồn tại của đối tượng Image. Nếu đối tượng Image này không có sẵn, khối này sẽ không được thực thi. Image() constructor tạo và tải lại một đối tượng Image mới gọi là image1.
Phương thức xử lý lỗi onMouseOver được kích hoạt khi người dùng di chuyển chuột qua link (hình ảnh đó), và onMouseOut event handler đươc kích hoạt khi người dùng di chuyển chuột ra khỏi link đó.top và left của một đối tượng để xác định vị trí của nó bất cứ đâu trên màn hình. Dưới đây là cú pháp: Khi di chuyển chuột qua hình ảnh, HTTP image thay đổi từ hình ảnh đầu tiên tới hình ảnh thứ hai. Khi di chuyển chuột ra khỏi hình ảnh, thì hình ảnh ban đầu được hiển thị.Khi di chuyển chuột ra khỏi link, hình ảnh khởi tạo đầu tiên html.gif sẽ tái xuất hiện trên màn hình.
Ví dụ Bạn thử ví dụ sau: Kết quả Animation tự động hóaTrong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển qua phải mỗi khi nhấp chuột. Chúng ta có thể tự độ hóa tiến trình này bởi sử dụng hàm setTimeout() như sau:setTimeout() như sau: Dưới đây, chúng tôi thêm nhiều phương thức hơn. Đó là:
Ví dụ Bạn thử ví dụ sau: Kết quả Rollover với một Mouse EventDưới đây là ví dụ đơn giản minh họa rollover hình ảnh với một Mouse Event. Chúng ta cùng quan sát những gì đang được sử dụng trong ví dụ này:
Kết quả Move your mouse over the image to see the result
|
