Jquery MouseWheel Plugin
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 MouseWheel Plugin

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2459)
RAPOR ET
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.



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