Trang chủ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
Code jQuery
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.
Đầ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
<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>
<div class="wrap">
<a href=" http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">
![http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">](http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg">){kind=link}
<img src=" http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg" alt="Picture 1"/>
![http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"](http://domain.com/wp-content/uploads/2016/08/3601313864_32fc218bb3_q.jpg"){kind=link}
</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
.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;
}
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'});
}
);
});
$('#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.