Hướng dẫn phóng to , thu nhỏ hình với jQuery

Ắt hẳn là bạn đã từng nhìn thấy rất nhiều trang web sử dụng hiệu ứng phóng to và thu ảnh nhỏ ảnh mỗi khi chúng ta click chuột vào ảnh đó. Thực ra hiệu ứng đó rất đơn giản và chỉ cần vài đoạn code là các bạn có thể làm được điều đó.

Xem Demo | Download

Đầu tiên các bạn chèn hình như sau :

<h1>Click image to Zoom In and Zoom Out</h1>
<img src="Images/smile.png" alt="Smile" id="imgSmile" />

Sau đó chèn đoạn script sau :

$(document).ready(function(){
   $('#imgSmile').awidth(200);
   $('#imgSmile').mouseover(function()
   {
      $(this).css("cursor","pointer");
   });
   $("#imgSmile").toggle(function()
     {$(this).animate({awidth: "500px"}, 'slow');},
     function()
     {$(this).animate({awidth: "200px"}, 'slow');
   });
});

Đầu tiên chúng ta ấn định hình sẽ có kích thước là 200px, và khi chúng ta rê chuột vào hình, thì con trỏ sẽ chuyển sang dạng bấm (pointer). Kế tiếp phương thức toogle sẽ nối 2 hay nhiều hiệu ứng lại với nhau, điều này cho phép chúng ta chỉ định với lần click đầu tiên, hình sẽ được phóng to, và lần click kế tiếp , hiệu ứng thu nhỏ sẽ được tiến hành.

Rất đơn giản và dễ thực hiện phải không các bạn. Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster