JAVA - NIIT-ICT: JavaScript

Bạn có thể sử dụng JavaScript để tạo một hoạt ảnh phức tạp có, nhưng không giới hạn, các yếu tố sau

bắn pháo hoa

Hiệu ứng mờ dần

Roll-in hoặc Roll-out

Trang-in hoặc Page-out

Chuyển động của đối tượng

Học lập trình Java

Bạn có thể quan tâm đến thư viện hoạt hình dựa trên JavaScript hiện có: Script.Aculo.us .

Hướng dẫn này cung cấp một sự hiểu biết cơ bản về cách sử dụng JavaScript để tạo ra một hình ảnh độ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ố loại mẫu được xác định bởi một phương trình hoặc hàm logic.

Link đăng ký : Khóa học java miễn phí.

JavaScript cung cấp hai chức năng sau để được sử dụng thường xuyên trong các chương trình hoạt ảnh.

setTimeout (function, duration) - Hàm này gọi hàm sau thời gianmili giây tính từ thời điểm này.

setInterval (function, thời gian) - Chức năng này gọi là chức năngsau mỗi khoảng thời gian mili giây.

clearTimeout (setTimeout_variable) - Chức năng này gọi xóa bất kỳ bộ đếm thời gian nào được thiết lập bởi các hàm setTimeout ().

JavaScript cũng có thể đặt một số thuộc tính của đối tượng DOM bao gồm vị trí của nó trên màn hình. Bạn có thể đặt thuộc tính trên cùng và bên trái của đối tượng để định vị nó ở bất cứ nơi nào trên màn hình. Đây là cú pháp của nó.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Hoạt ảnh thủ công

Vì vậy, hãy thực hiện một hoạt ảnh đơn giản bằng cách sử dụng các thuộc tính đối tượng DOM và các hàm JavaScript như sau. Danh sách sau đây chứa các phương thức DOM khác nhau.

Chúng tôi đang sử dụng hàm JavaScript getElementById () để lấy đối tượng DOM và sau đó gán nó cho một biến toàn cầu imgObj .

Chúng ta đã định nghĩa một hàm khởi tạo init () để khởi tạo imgObjnơi chúng ta đã thiết lập các thuộc tính vị trí và trái của nó .

Chúng tôi đang gọi chức năng khởi tạo tại thời điểm tải cửa sổ.

Cuối cùng, chúng ta đang gọi hàm moveRight () để tăng khoảng cách bên trái lên 10 pixel. Bạn cũng có thể đặt giá trị âm thành giá trị âm để di chuyển sang bên trái.

Thí dụ

Hãy thử ví dụ sau.

<html>
   
   <head>
      <title>JavaScript Animation</title>
      
      <script type="text/javascript">
         <!--
            var imgObj = null;
            
            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';
            }
            
            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>

Hoạt ảnh tự động

Trong ví dụ trên, chúng ta đã thấy cách một hình ảnh di chuyển sang phải với mọi nhấp chuột. Chúng ta có thể tự động hóa quá trình này bằng cách sử dụng hàm setTimeout () như sau:

Ở đây chúng tôi đã thêm nhiều phương pháp hơn. Hãy xem có gì mới ở đây -

Hàm moveRight () đang gọi hàm setTimeout () để thiết lập vị trí của imgObj .

Chúng ta đã thêm một hàm stop mới () để xóa bộ đếm thời gian được thiết lập bởi hàm setTimeout () và đặt đối tượng ở vị trí ban đầu của nó.

Thí dụ

Hãy thử mã ví dụ 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'; 
            }
            
            window.onload =init;
         //-->
      </script>
      
   </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>

Rollover với một sự kiện chuột

Dưới đây là một ví dụ đơn giản hiển thị rollover hình ảnh với sự kiện chuột.

Hãy xem những gì chúng ta đang sử dụng trong ví dụ sau

Tại thời điểm tải trang này, câu lệnh if if kiểm tra sự tồn tại của đối tượng hình ảnh. Nếu đối tượng hình ảnh không có sẵn, khối này sẽ không được thực hiện.

Các hình ảnh () constructor tạo ra và tải trước một đối tượng hình ảnh mới có tên gọi image1 .

Thuộc tính src được gán tên của tệp hình ảnh bên ngoài được 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 # (hash) vô hiệu hóa liên kết để trình duyệt không cố gắng truy cập URL khi được nhấp. Liên kết này là một hình ảnh.

Trình xử lý sự kiện onMouseOver được kích hoạt khi chuột của người dùng di chuyển lên liên kết và trình xử lý sự kiện onMouseOut được kích hoạt khi chuột của người dùng di chuyển ra khỏi liên kết (hình ảnh).

Khi chuột di chuyển qua hình ảnh, hình ảnh HTTP thay đổi từ hình ảnh đầu tiên sang hình ảnh thứ hai. Khi di chuyển chuột ra khỏi hình ảnh, hình ảnh gốc sẽ được hiển thị.

Khi chuột di chuyển ra khỏi liên kết, hình ảnh html.gif ban đầu sẽ xuất hiện lại 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;">
      <img name="myImage" src="/images/html.gif" />
      </a>
   </body>
</html>

JAVA - NIIT-ICT

Thứ Tư, 14 tháng 11, 2018

JavaScript - Hoạt ảnh

bắn pháo hoa

Hoạt ảnh thủ công

Hoạt ảnh tự động

Rollover với một sự kiện chuột

Không có nhận xét nào:

Đăng nhận xét

Lập trình Java - Ngoại lệ

Danh Sách Khóa Đào Tạo

Tổng số lượt xem trang