Eray USTA

Başlangıç

İlk olarak kullanımından bahsedelim. Yazacağımız kodlardan sonra görüntümüz resimdeki gibi olacaktır. İsterseniz demo sayfasına burdan ulaşabilirsiniz.

XHTML Kodları

<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Css Kodları

ul.thumb {
	float: left;
	list-style: none;
	margin: 0; padding: 10px;
	width: 360px;
}
ul.thumb li {
	margin: 0; padding: 5px;
	float: left;
	position: relative; 	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px;
	-ms-interpolation-mode: bicubic; 
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}
ul.thumb li img.hover {
	background:url(thumb_bg.png) no-repeat center center;
	border: none; /* Get rid of border on hover */
}

Not:Css kodları içinde İE6 için uygun kodlar için şurdan,
png transparanlığı için ise şurdan
yararlanılmıştır.

Jquery Kodları

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});  
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px',
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* Set new width */
			height: '174px', /* Set new height */
			padding: '20px'
		}, 200);

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class */
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* Set width back to default */
			height: '100px', /* Set height back to default */
			padding: '5px'
		}, 400);
});

Son Söz

Eğer bu jquery örneği yeterli gelmediyse şu anlatıma bakabilir ve bu siteden jquery ile ilgili birçok kaynağa ulaşabilirsiniz.

Bu yazı şu sitedeki yazının kendimce türkçeleştirilmişidir ve kesinlikle alıntıdır.

{ Benzer Yazılar }

• 75 Yüksek Kalite Arkaplan Resmi
• Blogger Çok Yorum Alan Yazılar
• Blogspot Yazı Editörü Kısa Yolları