HỌC HÌNH CHUYỂN ĐỘNG THEO CSS

DI CHUYỂN HÌNH THEO CSS.

 

    CSS (Cascading Style Sheets)  là phương pháp viết code tuỳ theo tưng mục có tên khác nhau gọi là style để chứa trong HTML cuả trang Web (Web contents).

Thí dụ phải  dúng chữ style khi muốn quy định color, font, size,

Phương pháp CSS phát minh năm 1996 rất phức tạp.

Phương pháp SVG phát minh năm 1999 ngắn gọn  hớn CSS.

          ----------------------------

Bài nầy áp dụng phương pháp CSS .

Nhưng phương pháp SVG/SMIL dễ nhớ hơn .

            -------------------------

//1-Phần đầu tiên viêt style như sau thì hình xuất hiện

 <html>

     <head></head>

     <body>

      <img id="image"  style="position:relative;left:120;;top:200;width:140;height:160"

      src="ball.gif">

//2- Tiếp theo viết như sau để nối với function

// làm di chuyển hình đã được chứa trong script.

//Trong script chúng ta phải chứa hình và vị trí khởi

//đâu goi la loc=0, thời gian di chuyển và vị trí dừng lại

     <script>

      var object=document.getElementById("image")

      var loc=0;  

  function doMove(){

          loc+=1; //  cho tốc độ di chuyền

      object.style.left=loc;

       t=setTimeout(doMove,10); //cho thời gian di chuyển.

      if (loc>=600) // tới vị trí nầy thì dưng lại.

      return object.style.left=loc=0}

     // khi về vị trí 0 pixel r̀ồi thì sẽ tiêp tục chạy lại

     </script>

   // muốn bắt đâu di chuyền thi click function.

   //muốn chấm dứt thỉ xóa thời gian di chuyển

  <span onclick="doMove()">START</span>

     <span onclick="clearTimeout(t)">STOP</span>

    </body></html>

------

NHẬN XÉT .

1-Dùng phương pháp CSS mặc dầu phức tạp hơn phương pháp sVG/SMIL nhưng với CSS chúng tá co thể thay đổi kich thước –resize-của hinh tuỳ thích.Thí dụ quả banh vẽ tròn nhưng tôi bóp thành méo   

2-Trương hơp không muốn dùng style cua CSS thì viết như sau. Hinh vần xuất hiện nhưng không thay đổi kích thước và không chuyển động. Quan trọng của CSS là phải nhớ dung chữ style trong html. 

Thí dụ viết như sau.

    <html><body>

     <img id="image" src="ball.gif">

     </body> </html>

Hinh xuất hiện với kích thước đã vẽ và không thễ làm di chuyển đước.