Xem bài viết Dùng Mootools tạo thư viện trưng bày ảnh với hiệu ứng đẹp mắt

Dùng Mootools tạo thư viện trưng bày ảnh với hiệu ứng đẹp mắt

Jul 31, 2012Jquery / Javascript
Thực hiện bài này chùng ta phải đi qua các phần chính sau:

1. HTML

Phần HTML, mình đưa 1 đoạn mẫu tượng trưng cho 1 hình.
<img src="http://2cweb.vn/templates/public/web2c/images/thumbnail-shadow.png" alt="bottom" class="thumbnail-shadow">

2. CSS

Phần CSS mình định dạng cho các hình ảnh như sau:
	
.thumbnail-wrap {
	float:left;
	height:151px;
	margin:15px;
	width:151px;
}
.thumbnail-div {
	background-color:#313131;
	float:left;
	height:146px;
	padding:5px 0 0 5px;
	width:146px;
}
.thumbnail-shadow {
	float:left;
	height:33px;
	width:100%;
}
.thumbnail-div .sections-overlay {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(../images/thumbnail-overlay.png) no-repeat scroll -40px -300px;
	float:left;
	margin-top:-33px;
}
.thumbnail-div div{
	height:141px;
	width:141px;
}
.sections-overlay {
	background-image:url(../images/readmore-bg.png);
	opacity: 0; 
	visibility:hidden;
	background-position: 0px -167px;
}
.thumbnail-div .sections-overlay .zoom {
	margin:60px 0 0 61px;
}
.sections-overlay .zoom {
	border:medium none;
	margin:165px 0 0 312px;
}
.readmore {
	background-image:url(../images/readmore-bg.png);
	color:#FFFFFF;
	display:block;
	float:right;
	font-size:10px;
	margin:17px 0 0 40px;
	padding:5px 10px;
}
	

3. MOOTOOLS

Và đây là phần Mootools
window.addEvent('domready',function(e){
initImageZoom();
$$('div.sections-overlay').each(function(div){
	div.set('opacity',0);
	div.set('morph', {duration:'1000'});
})
$$('div.thumbnail-div').each(function(div){
	div.set('tween', {duration: '450'});
	div.addEvents({
		'mouseover': function(){
			$(this).tween('marginTop', '-10px');
			$(this).getElements('div.sections-overlay').each(function(d){
				d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
			});
		},
		'mouseout': function(){
			$(this).tween('marginTop', '0px');
			$(this).getElements('div.sections-overlay').each(function(d){
				d.morph({opacity: 0, backgroundPosition: "0px -167px"});
			});
		}
	});

});
});
	
NOTE : Khi chạy trên chorme, hiệu ứng này khi click vào xem hình thì nó có xuất hiện icon hình bị vỡ, sau đó nó mới chuyển thành hình lớn, nhưng cũng nhanh thôi. Trên Firefox thì OK hơn.

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: Sưu Tầm

 

Leave a Comments