Xem bài viết [Hướng dẫn] Phóng to ảnh cùng với tiêu đề với Zoom Thumnail Image jQuery

[Hướng dẫn] Phóng to ảnh cùng với tiêu đề với Zoom Thumnail Image jQuery

Jul 01, 2012Jquery / Javascript
Phần HTML mình để đoạn tượng trưng như sau, các bạn có thể cho nhiều hình ảnh hơn nhé: 

1. HTML

Phần CSS như sau:

2. CSS

body {
	font-family:arial;
        width:500px; margin:10px auto;	
}

.zitem {
	width:125px;
	height:125px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	overflow:hidden;
	position:relative;
	float:left;
}

.zitem .caption {
	width:125px;
	height:30px;
	background:#000;
	color:#fff;
	font-weight:bold;
		
	position:absolute;
	bottom:-1px; /* fix IE */
	left:0;

	/* Mặc định thì nó sẽ được ẩn đi*/
	display:none;

	/* thiết lập opacity  */
	filter:alpha(opacity=70);    /* cho ie  */
	-moz-opacity:0.7;    /* cho trình duyệt mozilla cũ giống netscape  */
	-khtml-opacity: 0.7;    /* cho trình duyệt safari cũ*/  
	opacity: 0.7;    /* css chuẩn, hiện tại nó làm việc hầu hết ở các trình duyệt hiện đại như firefox,  */

}

.zitem .caption a {
	text-decoration:none;
	color:#fff;
	font-size:12px;	
	padding:5px;
	display:block;
}

img {
	border:0;
	
	/* cho phép javascript di chuyển img position*/
	position:absolute;
}

3. JAVASCRIPT

Đây là một đoạn code jQuery đơn giản với hiệu ứng di chuột. Những gì chúng ta phải làm là tính toán chiều rộng và chiều cao và thiết lập nó cho các hình ảnh, đoạn code như sau:
$(document).ready(function() {

	var move = -15;  //Di chuyển image (pixel)
	
	var zoom = 1.2;  //Phần trăm zoom, 1.2 =120%

	// Khi hover vào các thumbnail
	$('.zitem').hover(function() {
		
		// Thiết lập width và height theo phần trăm zoom
		width = $('.zitem').width() * zoom;
		height = $('.zitem').height() * zoom;
		
		//DI chuyển và zoom image
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Hiện tiêu đề(caption)
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset image
		$(this).find('img').stop(false,true).animate({'width':$('.zitem').width(), 'height':$('.zitem').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Ẩn tiêu đề
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

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: 2Cweb.vn

 

Leave a Comments