Jquery SlipHover Plugin Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery SlipHover Plugin Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2155)
RAPOR ET
Jquery derslerimize devam ediyoruz.Bu derste sliphover pluginini anlatacağım.İşlevinden bahsedecek olursak bir hover efekti sonucu çıkan bilgi yazsını kayarmış gibi diğer objeye geçen güzel bir plugin.Örneği görünce daha iyi anlarsınız.

İncele : http://ustaderslik.com/ornek/sliphover/

İndir : http://ustaderslik.com/dosya/sliphover.rar

Şimdi kullanımına bakalım.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.sliphover.min.js"></script>
<script type="text/javascript">
$(function(){

$("#resimler").sliphover({ //plugini uyguluyoruz
height:"100%",//hover olayında çıkan objenin boyutu.normal 100% dür
flip:false,//3d geçiş.normal falsedir
duration:300,//animasyon geçiş süresi.1000=1 saniye
backgroundColor:'#d12c69',//arkaplan rengi
fontColor:"#f5f5f5"//font rengi
});

})
</script>
<style type="text/css">
*{margin:0;padding:0;border:0;}
.resimler{width:900px;margin:0 auto;margin-top:50px;}
.resimler ul li{list-style-type:none;float:left;margin-bottom:-5px;}
.resimler ul li img{width:300px;height:175px;}
.resimler ul li div{opacity:.8;}

.temiz{clear:both;}
</style>
</head>
<body>

<div id="resimler" class="resimler">
<ul>
<li> <img src="resim.jpg" title="Başlık-1" /> </li>
<li> <img src="resim.jpg" title="Başlık-2" /> </li>
<li> <img src="resim.jpg" title="Başlık-3" /> </li>
<li> <img src="resim.jpg" title="Başlık-4" /> </li>
<li> <img src="resim.jpg" title="Başlık-5" /> </li>
<li> <img src="resim.jpg" title="Başlık-6" /> </li>
<div class="temiz"></div>
</ul>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/87d475df8.png

Öncelikle bir div oluşturup buna plugini uyguluyoruz.Ardından div içine ul li yapısı oluşturup li lerin içine resim ve obje koyabiliyoruz.Kullanımı bu kadar.Basit ve güzel bir plugin.

Bir kaç ayarı var örnekte açıklamalarını yazdım.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol