Hiệu ứng (Animation) trong JavaScript | 208 bài học Javascript miễn phí hay nhất PDF

http://vietjack.com/javascript/index.jsp Copyright © vietjack.com Hiệu ứng (Animation) JavaScript Bạn sử dụng JavaScript để tạo hiệu ứng phức tạp, khơng giới hạn, có phần tử sau:  Fireworks  Fade Effect  Roll-in Roll-out  Page-in Page-out  Object movements Bạn nên quan tâm đến thư viện hiệu ứng tồn xây dựng JavaScript:Script.Aculo.us Chương hướng dẫn cung cấp cho bạn kiến thức cách sử dụng JavaScript để tạo hiệu ứng JavaScript sử dụng để di chuyển số phần tử DOM (, phần tử HTML khác) xung quanh trang theo số mẫu định phương trình hàm logic JavaScript cung cấp hai hàm sau mà sử dụng thường xuyên chương trình animation  setTimeout( function, duration) − Hàm gọi Hàm sau quãng thời gianduration (tính mili giây) từ  setInterval(function, duration) − Hàm gọi Hàm sau quãng thời gianduration (tính mili giây)  clearTimeout(setTimeout_variable) − Hàm xóa bấm thiết lập hàm setTimeout() JavaScript thiết lập số thuộc tính đối tượng DOM bao gồm vị trí hình Bạn thiết lập thuộc tính top left đối tượng để xác định vị trí đâu hình Dưới cú pháp: // Set distance from left edge of the screen object.style.left = distance in pixels or points; http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/javascript/index.jsp Copyright © vietjack.com or // Set distance from top edge of the screen object.style.top = distance in pixels or points; Animation thao tác tay Bây thực animation đơn giản sử dụng thuộc tính đối tượng DOM hàm JavaScript sau Sau liệt kê phương thức DOM khác nhau:  Chúng sử dụng hàm getElementById() để nhận đối tượng DOM sau gán tới biến Global imgObj  Chúng định nghĩa hàm khởi tạo init() để khởi tạo imgObj, thiết lập thuộc tính position left  Chúng gọi hàm khởi tạo thời điểm tải cửa sổ  Cuối cùng, gọi hàm moveRight() để tăng khoảng cách trái 10 pixel Bạn thiết lập giá trị âm để di chuyển sang cạnh trái Ví dụ Bạn thử ví dụ sau: JavaScript Animation

Click button below to move the image to right

Kết Animation tự động hóa Trong ví dụ trên, thấy cách hình ảnh di chuyển qua phải nhấp chuột Chúng ta tự độ hóa tiến trình sử dụng hàm setTimeout() sau: Dưới đây, thêm nhiều phương thức Đó là:  Hàm moveRight() gọi hàm setTimeout() để thiết lập vị trí imgObj http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/javascript/index.jsp  Copyright © vietjack.com Chúng tơi thêm hàm stop() để xóa bấm thiết lập hàm setTimeout() để thiết lập đối tượng vị trí khởi tạo Ví dụ Bạn thử code sau: JavaScript Animation http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/javascript/index.jsp Copyright © vietjack.com

Click the buttons below to handle animation

Kết Rollover với Mouse Event Dưới ví dụ đơn giản minh họa rollover hình ảnh với Mouse Event Chúng ta quan sát sử dụng ví dụ này:  Tại thời điểm tải trang này, lệnh if kiểm tra cho tồn đối tượng Image Nếu đối tượng Image khơng có sẵn, khối khơng thực thi  Image() constructor tạo tải lại đối tượng Image gọi image1  Thuộc tính src gán tên image file ngoại vi gọi /images/html.gif  Tương tự, tạo đối tượng image2 gán /images/http.gif đối tượng  Dấu # vơ hiệu hóa đường link trình duyệt không cố gắng tới URL click Link hình ảnh http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/javascript/index.jsp  Copyright © vietjack.com Phương thức xử lý lỗi onMouseOver kích hoạt người dùng di chuyển chuột qua link (hình ảnh đó), onMouseOut event handler đươc kích hoạt người dùng di chuyển chuột khỏi link  Khi di chuyển chuột qua hình ảnh, HTTP image thay đổi từ hình ảnh tới hình ảnh thứ hai Khi di chuyển chuột khỏi hình ảnh, hình ảnh ban đầu hiển thị  Khi di chuyển chuột khỏi link, hình ảnh khởi tạo html.gif tái xuất hình Rollover with a Mouse Events

Move your mouse over the image to see the result

http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com/javascript/index.jsp Copyright © vietjack.com Kết Move your mouse over the image to see the result http://vietjack.com/ Trang chia sẻ học online miễn phí Page ... học online miễn phí Page http://vietjack.com /javascript/ index.jsp Copyright © vietjack.com Kết Move your mouse over the image to see the result http://vietjack.com/ Trang chia sẻ học online miễn. .. đối tượng  Dấu # vô hiệu hóa đường link trình duyệt khơng cố gắng tới URL click Link hình ảnh http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /javascript/ index.jsp... imgObj.style.left = '0px'; } window.onload =init; // > http://vietjack.com/ Trang chia sẻ học online miễn phí Page http://vietjack.com /javascript/ index.jsp Copyright © vietjack.com