Old school Swatch Watches

CuDemVN.Wap.Sh

- 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

Admin* 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
↑↑ Lượt xem: 275
score
Đánh giá: 4.5/ 5, 275 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-275]