Hiệu ứng Animation trong JavaScript Bạn có thể sử dụng JavaScript để tạo một hiệu ứng phức tạp, không giới hạn, có các phần tử sau: Fireworks Fade Effect Roll-in hoặc Roll-out Pa
Trang 1Hiệu ứng (Animation) trong JavaScript
Bạn có thể sử dụng JavaScript để tạo một hiệu ứng phức tạp, không giới hạn, có các phần tử sau:
Fireworks
Fade Effect
Roll-in hoặc Roll-out
Page-in hoặc Page-out
Object movements
Bạn nên quan tâm đến thư viện hiệu ứng đang tồn tại xây dựng trên nền JavaScript:Script.Aculo.us
Chương hướng dẫn này cung cấp cho bạn kiến thức cơ bản về cách sử dụng JavaScript để tạo một hiệu ứng
JavaScript có thể được sử dụng để di chuyển một số phần tử DOM (<img />, <div> hoặc bất kỳ phần tử HTML nào khác) xung quanh trang theo một số mẫu được quyết định bởi một phương trình hoặc hàm logic
JavaScript cung cấp hai hàm sau mà được sử dụng thường xuyên trong các chương trình animation
setTimeout( function, duration) − Hàm này gọi Hàm sau quãng thời gianduration (tính
bằng mili giây) từ bây giờ
setInterval(function, duration) − Hàm này gọi Hàm sau mỗi quãng thời gianduration (tính
bằng mili giây)
clearTimeout(setTimeout_variable) − Hàm này xóa bất cứ bộ bấm giờ nào được thiết lập bởi các hàm setTimeout()
JavaScript có thể cũng thiết lập một số thuộc tính của một đối tượng DOM bao gồm vị trí của nó
trên màn hình Bạn có thể thiết lập thuộc tính 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:
// Set distance from left edge of the screen.
object style left = distance in pixels or points ;
Trang 2// Set distance from top edge of the screen.
object style top = distance in pixels or points ;
Animation thao tác tay
Bây giờ chúng ta cùng thực hiện một animation đơn giản sử dụng các thuộc tính đối tượng DOM
và các hàm JavaScript như sau Sau đây liệt kê các phương thức DOM khác nhau:
Chúng tôi đang sử dụng hàm getElementById() để nhận một đối tượng DOM và sau đó gán nó tới một biến Global là imgObj
Chúng tôi đã định nghĩa một hàm khởi tạo init() để khởi tạo imgObj, ở đây chúng tôi đã thiết lập các thuộc tính position và left của nó
Chúng tôi đang gọi hàm khởi tạo tại thời điểm tải cửa sổ
Cuối cùng, chúng tôi đang gọi hàm moveRight() để tăng khoảng cách trái bởi 10 pixel Bạn
có thể cũng thiết lập nó một giá trị âm để di chuyển nó sang cạnh trái
Ví dụ
Bạn thử ví dụ sau:
<html>
<head>
<title> JavaScript Animation </title>
<script type = "text/javascript" >
var imgObj = null ;
function init (){
Trang 3}
function moveRight (){
imgObj style left = parseInt ( imgObj style left ) + 10 'px' ;
}
window onload = init ;
// >
</script>
</head>
<body>
<form>
<img id = "myImage" src = "./images/html.gif" />
<p> Click button below to move the image to right </p>
<input type = "button" value = "Click Me" onclick = moveRight (); " />
</form>
</body>
</html>
Kết quả
Animation tự động hóa
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, chúng tôi thêm nhiều phương thức hơn Đó là:
Hàm moveRight() đang gọi hàm setTimeout() để thiết lập vị trí của imgObj
Trang 4 Chúng tôi đã thêm một hàm mới là stop() để xóa bộ bấm giờ được thiết lập bởi hàm setTimeout() và để thiết lập đối tượng tại vị trí khởi tạo
Ví dụ
Bạn thử code sau:
<html>
<head>
<title> JavaScript Animation </title>
<script type = "text/javascript" >
var imgObj = null ;
var animate ;
function init (){
imgObj = document getElementById ( 'myImage' );
imgObj style position = 'relative' ;
imgObj style left = '0px' ;
}
function moveRight (){
imgObj style left = parseInt ( imgObj style left ) + 10 'px' ;
animate = setTimeout ( moveRight , 20 ); // call moveRight in 20msec
}
function stop (){
clearTimeout ( animate );
imgObj style left = '0px' ;
}
Trang 5
</head>
<body>
<form>
<img id = "myImage" src = "./images/html.gif" />
<p> Click the buttons below to handle animation </p>
<input type = "button" value = "Start" onclick = moveRight (); " />
<input type = "button" value = "Stop" onclick = stop (); " />
</form>
</body>
</html>
Kết quả
Rollover với một Mouse Event
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
Thuộc tính src được gán tên của image file ngoại vi gọi là /images/html.gif
Tương tự, chúng ta tạo đối tượng image2 và gán /images/http.gif trong đối tượng này
Dấu # vô hiệu hóa đường link để mà trình duyệt không cố gắng tới URL khi được click Link này là một hình ảnh
Trang 6 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 đó
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
<html>
<head>
<title> Rollover with a Mouse Events </title>
<script type = "text/javascript" >
if ( document images ){
var image1 = new Image (); // Preload an image
image1 src = "./images/html.gif" ;
var image2 = new Image (); // Preload second image
image2 src = "./images/http.gif" ;
}
// >
</script>
</head>
<body>
<p> Move your mouse over the image to see the result </p>
<a href = "#" onMouseOver = document myImage src = image2 src ;
onMouseOut = document myImage src = image1 src ; >
Trang 7Move your mouse over the image to see the result