Bu dersimizde jquery mouse wheel pluginini anlatacağım.Öncelikle mouse wheel ne işe yarar ona deyinelim.Mousenin ortadaki topunun hareketini yakalayan bir plugin bu.Normal jquery fonksiyonlarında yer almıyor.Bunun için sayfaya yeni bir soya daha koymamız gerek.Aşağıdaki örneğin içinde bulabilirsiniz.
İndir : http://ustaderslik.com/dosya/mouse%20wheel.rar
Şimdi kodlarımıza gelelim.
$(".alan").mousewheel(function(objEvent, intDelta){
if (intDelta > 0){ /*Mouse yukarı hareket ettiyse*/ }
if (intDelta < 0){ /*Mouse aşağı hareket ettiyse*/ }
});
Önce mouse wheeli yakalayacağımız alanı seçip sonra fonksiyonu uyguluyoruz.intDelta atlı değişkenin değeri 0 dan büyük ise yukarı oynatıldı.Eğer küçük ise aşağı oynatıldı demek.
Bunu nerelerde kullanabiliriz derseniz slider yada kendi scrollunuzu yapmak isterseniz kullanabilirsiniz.Tabi bu aklıma gelenler.Şimdi basit bir örnek yapalım.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jQuery_mousewheel_plugin.js"></script>
<script type="text/javascript">
$(function(){
$(".alan").mousewheel(function(objEvent, intDelta){
if (intDelta > 0){ $(".alan").text('Yukarı'); }
if (intDelta < 0){ $(".alan").text('Aşağı'); }
});
})
</script>
<style type="text/css">
.alan{width:250px;height:250px;margin:auto;background:#ddd;}
</style>
</head>
<body>
<div class="alan">
Tekerleği oynat
</div>
</body>
</html>
Yukarıdaki örnekte bir gri alan olacak.Onun üzerinde mouse tekerleğini çevirirseniz,hangi yöne olduğu yazacaktır.
UstaDerslik
