Hi, Phòng khách!
Trang chủ
Đăng nhập
Công Cụ Tìm Kiếm

Lần hoạt động

| |
Tìm kiếm

  Tạo hiệu ứng zoom out hình ảnh bằng jquery

Bài viết được duyệt bởi PuaruVN
Đăng ngày :23.08.2016 / 13:12[TOP]
IZ
IZ
Active Member
♥♥♥
[Designer]
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.
Code HTML

Đầ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
PHP Code:
<?php
<div id="container" class="container">
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 1"/>
</
a>
</
div>
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 2"/>
</
a>
</
div>
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 3"/>
</
a>
</
div>
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 4"/>
</
a>
</
div>
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 5"/>
</
a>
</
div>
<
div class="wrap">
<
a href="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
<
img src="http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 6"/>
</
a>
</
div>
</
div>
?>

Code CSS
PHP Code:
<?php
.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;
opacity0.5;
}
?>

Code Jquery
PHP Code:
<?php
$(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'});
 }
 );
 });
?>

Xem demo tại
Vui lòng đăng nhập để thấy Links!


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.

Đã chỉnh sửa. IZ (23.08.2016 / 13:12) [1]
Bình luận bài viết
Đăng Nhập để Bình luận và sử dụng đầy đủ tính năng Diễn Đàn
  Tổng số: 1 Bình luận

Chia sẻ bài viết
Đám Mây Từ Khóa
Bài Viết Cùng chuyên mục
Lọc theo tác giả
Xem chủ để ngoại tuyến (Offline)

Trong diễn đàn

Sắp xếp theo thứ tự từ trên xuống
BigTruyen.info - Kho Truyện Tranh Online Khổng lồ
Trang chủ