ChiaSeIT.Mobie.In

Tạo hiệu ứng Zoom Out hình ảnh bằng jQuery

Hôm nay mình sẽ hướng dẫn các bạn tạo hiệu ứng zoom out hình ảnh bằng jquery. Ý tưởng là hình ảnh sẽ được thu nhỏ lại khi đặt chuột lên hình ảnh đó. Hiệu ứng này thường được sử dụng trong các website về chụp hình hay thư viện hình ảnh để tạo ra một chút hiệu ứng cho sinh động.
Đầu tiên chúng ta cần tạo một vài thẻ div để chứa một vài hình ảnh
Code HTML




Code CSS


.wrap{
width:200px;
height:200px;
margin:0px;
overflow:hidden;
position:relative;
float:left;
}
.wrap a img{
border:none;
position:absolute;
top:-66.5px;
left:-150px;
height:500px;
opacity: 0.5;
}



Code jQuery


$(function() {
$('#container img').hover(
function(){
var $this = $(this);
$this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
},
function(){
var $this = $(this);
$this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
}
);
});


Kết luận:
Qua hướng dẫn tạo hiệu ứng zoom out bằng jquery này, hy vọng sẽ giúp các bạn ứng dụng vào những website thực tế. Hẹn gặp các bạn ở những hướng dẫn khác. Cảm ơn các bạn đã theo dõi.

Bình luận
Từ Khóa
Tạo hiệu ứng Zoom Out hình ảnh bằng jQuery , Hôm, nay, mình, sẽ, hướng, dẫn, các, bạn, tạo, hiệu, ứng, zoom, out, hình, ảnh, , Tìm hiểu Tạo hiệu ứng Zoom Out hình ảnh bằng jQuery làm theo và học hỏi , Bài viết Hot Tạo hiệu ứng Zoom Out hình ảnh bằng jQuery ,
Cùng Chuyên Mục
Hướng dẫn tạo Sticky Navigation bằng jQuery
Hiển thị time viếng thăm lần cuối của khách bằng Javascript
Share code chuyển Tiếng Việt có Dấu sang Tiếng Việt không Dấu
Thiết kế banner Quảng cáo chuyển động cực chuyên nghiệp với Javascript
Share jQuery Plugin zzImgUr 1.6 - Upload ảnh lên Imgur.Com sử dụng HTML5
Share code JavaScript random ảnh sau mỗi lần load trang
Share code Ruồi Fshare, trò chuyện với Ruồi vui nhộn trên Wap/Web
Code tự động mở thêm POPUP ẩn sau Trình Duyệt chính
Share code Đổi tất cả các link trong Wap thành một link mới
Share code chặn Click chuột phải và Copy bài viết (sử dụng CSS và JavaScript)
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

1.2% sitemap.xml robots.txt U-ONC-STAT
XtGem Forum catalog