Jquery Mouse ile Objeyi Sağa Sola Kaydırma
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 Mouse ile Objeyi Sağa Sola Kaydırma

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3522)
RAPOR ET
Bu dersimizde jquery ile mouse sağ sol hareketine göre objeyi sağa sola kaydırmayı göstereceğim.Öncelikle mantığından bahsedeyim.Öncelikle mousenin sayfadaki konumunu yüzdesel olarak bulup sonra en fazla kaç kayması gerektiğine göre kayma miktarını bulup kaydırıyorum.Şimdi örneğe geçelim.

İncele : http://ustaderslik.com/ornek/kaydır.html

<!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">
$(function(){
var genislik=$(window).width(),orta=genislik/2,margin=parseInt($("div").css("margin-left"));//kullanacağım bazı değerleri alıp değişkenlere atadım.

$(document).mousemove(function(e){//mouse sayfada oynatıldığında
var konum=e.pageX,fark=(konum*100)/genislik;//mousenin konumunu yüzde olarak al.
if(konum<=orta){//eğer sayfanın solunda ise
var git=(50*(50-fark))/100;//ne kadar kayması gerektiğini bul
$("div").html(50-fark)
$("div").css("margin-left",(margin+git)+"px")//objeyi sağa doğru kaydır.
}else{//eğer sağında ise mouse
var git=(50*(fark-50))/100;
$("div").html(fark-50)
$("div").css("margin-left",(margin-git)+"px")//sola doğru kaydır.
}

})

});
</script>
<style type="text/css">
div{width:800px;height:450px;margin:auto;background:#666;color:#fff}
</style>
</head>
<body>

<div></div>

</body>
</html>


Mouseyi sağa sola kaydırarak görebilirsiniz.
  var git=(50*(50-fark))/100;
var git=(50*(fark-50))/100;

50* lar sağa ve sola en fazla kayma miktarı.Onları kendinize göre değiştirebilirsiniz.Ben margin kullandım örnekte eğer position ile yerleştirdiyseniz margin-left leri left yapın sadece.



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