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ü :
Ö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.
UstaDerslik
