Zingocan | jQuery – CSS Blog

Merhaba arakdaşlar.. Bugün itibariyle video derslere başlamış bulunuyorum.. Çekim esnasında bir kaç hata yaptım fakat bunları çekim dışında düzenledim artık hatalarımı maruz görünüz:)

Ben video içeriği dışında bir kaç bilgi daha vermek istiyorum;

Rollever yapıyı oluşturabilmek için videodada göründüğü gibi bir fonksiyon oluşturduk. Fonksiyonumuzun asıl mantığı ilk başta görünen resmin daha sonra mouse ile üzerine geldiğimiz zaman transparanlık kazanım ve en sonunda opacity ayarlarının 0 ‘ a düşmesini sağlıyor, arka kısımda bulunan background resmimizi ortaya çıkarıyor.. Aslında zaten bir backgorund resmimiz vardı fakat üzerinde bir resim olduğu için görünmüyordu, resmin opacity ayarını düşürdüğümüz için arkaplanımız ortaya çıktı.

Kodlarımız şu şelilde;

HTML

<pre><span class="tag"><img </span><span class="atn">class</span><span class="tag">=</span><span class="atv">"fade"</span><span class="tag">
</span><span class="atn">src</span><span class="tag">=</span><span class="atv">"images/who.jpg"</span><span class="tag">
</span><span class="atn">style</span><span class="tag">=</span><span class="embsrc"><span class="pun">"</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="pln">images</span><span class="pun">/</span><span class="pln">who_ro</span><span class="pun">.</span><span class="pln">jpg</span><span class="pun">);</span><span class="str">"</span></span><span class="tag"> </span><span class="atn">/</span><span class="tag">></span></pre>

CSS

CSS sınıflarında backgorund-image olarak adlandırılan ismi kendi isteğinize göre değişebilirsiniz.Resmimizin pozisyounu float: right seçeneğini kullanarak istediğimiz gibi efect verebiliriz. İstersek resmin bir kısmını gösterip diğer kısımları transparan yaparak backgorund resmimizle birlikte çalışmasına izin verebiliriz. Fakat CSS sınıflarında bir değişiklik yaparsak bunlara yeni boyut kazandırıp, HTML kodlarımız arasında ki div komutunu yaptığımız stile göre değiştirmemiz gerekir.

jQuery

1. Span daki wrap resmi (resmin pozisyonunu belirten kod)

2. background-image kodundaki  arkaplan resmini ortaya çıkarma

3. Yeni bir resim olarak gösterme

4. Hover efecti ile resme animasyon katma:

(function ($) {
$.fn.cross = function (options) {
return this.each(function (i) {
var $$ = $(this);

var target = $$.css('backgroundImage').replace(/^url|[()'"]/g, '');

$$.wrap('<span style="position: relative;"></span>')
.parent()
.prepend('<img>')
.find(':first-child')
.attr('src', target);

if ($.browser.msie || $.browser.mozilla) {
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : this.offsetTop
});
} else if ($.browser.opera && $.browser.version < 9.5) {

$$.css({
'position' : 'absolute',
'left' : 0,
'background' : '',
'top' : "0"
});
} else { // Safari
$$.css({
'position' : 'absolute',
'left' : 0,
'background' : ''
});
}

$$.hover(function () {
$$.stop().animate({
opacity: 0
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 250);
});
});
};

})(jQuery);

$(window).bind('load', function () {
$('img.fade').cross();
});

Aklınıza takılan herhangi bir soru olursa ben buradayım.. Bu ilk videolu jquery dersimdi.. kusurlarım varsa madur görünüz. Heycandandır

<img class="fade"
  src="images/who.jpg"
  style="background: url(images/who_ro.jpg);" />

Aradığınız şey bu başlıkta değilse aşağıdakileri deneyiniz.

• jQuery Video Dersleri – slide, hide ve fade Metodları
• 18 Adet jQuery Menü Dersi Demo ve Download
• jQuery ScrollTo Plugini Nasıl Kullanılır
• jQuery İconDock Plugin
• Bing Bong jQuery Oyun