Tạo Hiệu ứng Zoom Out Hình ảnh Bằng Jquery

Home » Series » Jquery Cơ bản » Tạo hiệu ứng zoom out hình ảnh bằng jquery

• Facebook

Prev Article Rate this post

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.

Nội dung

• Code HTML
• Code CSS
• Code Jquery
• Kết luận:

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

<div id="container" class="container"> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 1"/> </a> </div> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 2"/> </a> </div> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 3"/> </a> </div> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 4"/> </a> </div> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 5"/> </a> </div> <div class="wrap"> <a href="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"> <img src="http://blogit.vn/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 6"/> </a> </div> </div>

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

Nếu các bạn chưa nắm rõ về jquery có thể tìm hiểu về jquery cơ bản qua seri này.

$(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 đây

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.

• Facebook

Prev Article

Related Posts

Add Comment

Hủy

Lưu tên của tôi, email, và trang web trong trình duyệt này cho lần bình luận kế tiếp của tôi.

Bài viết mới

• Tạo hiệu ứng zoom out hình ảnh bằng jquery
• Quản lý danh sách công việc và ghi chú trong Sublime Text
• [Bài 3]: Sử dụng các plugin tiện ích cho Sublime Text 3
• [Bài 2]: Những phím tắt trong Sublime Text 3
• [Bài 1]: Hướng dẫn cài đặt và sử dụng Sublime Text 3

Phản hồi gần đây

Chuyên mục

• Bài tập Jquery
• HTML Cơ Bản
• HTML5 Cơ Bản
• Jquery Cơ bản
• Laravel
• Phần mềm
• PHP Cơ Bản
• Series
• Sử dụng Sublime Text 3
• Thủ Thuật
• Wordpress