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

Danh mục: Html & Javascript
 

Ắ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 đó.

hiệu ứng zoom hình, jQuery, jQuery code, zoom effect, zoom pic

Đầ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').width(200);

   $('#imgSmile').mouseover(function()

   {

      $(this).css("cursor","pointer");

   });

   $("#imgSmile").toggle(function()

     {$(this).animate({width: "500px"}, 'slow');},

     function()

     {$(this).animate({width: "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.

 



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"