GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

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

RoSino18k

06-07-2016

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

Hướng dẫn phóng to và thu nhỏ hình ảnh với jQuery
[Tải ảnh]

Đầu tiên các bạn chèn code 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.

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!

Nguồn: ThuThuatWeb.Net