jQuery offset() kullanımı

Tarih: 04:27 Yazar: Unknown 0 yorum

jQuery offset methodu seçmiş olduğumuz bir elementin başlangıca uzaklığını verir. yani şöyle ki bir div elemeni seçtik ve bunun üst köşte noktasının kordinantlarını almak istiyoruz bunu offset methodu kullanarak çok rahat alabiliriz.

Parametreler

top: tarayıcının üst kısmına ne kadar uzakta olduğunu gösterir.
left: Tarayıcının yan tarafından ne kadar uzakta olduğunu gösterir.

Kullanımı

Bir Elemente ait top left değerini nasıl alacağımıza bakalım:

[html]

<span id="x"></span>
<span id="y"></span>
<div class="yer"></div>
[/html]

Html yapımız böyle olsun.

[css]

<style type="text/css">
*,body {
padding:0;
margin:0;
}
.yer {
width:200px;
height:200px;
background:#555;
}
</style>
[/css]

Css Dosyamız divimiz belli olsun diye background verdim.


Jquery kodlarımız:
[js]
$(function(){
var pozisyon = $(".yer").offset(), // fonksiyonumuz
x = $("span#x"), // left değerini yazdıracağımız element
y = $("span#y"); // top değerini yazdıracağımız element
x.html(pozisyon.left); // left değerini yazdırdık
y.html(pozisyon.top); // top değerini yazdırdık
});

[/js]

Şeklinde x ve y değerlerini alabiliyoruz.


Şimdi Değiştirmeye bakalım html ve css aynı şekilde olsun js dosyamıza eklemeler yapalım.


[js]
$(function(){
var pozisyon = $(".yer").offset(), // fonksiyonumuz
x = $("span#x"), // left değerini yazdıracağımız element
y = $("span#y"); // top değerini yazdıracağımız element

$(window).mousemove(function(e){
$(".yer").offset({
"top" : e.pageY,
"left" : e.pageX
});
x.html(e.pageY); // left değerini yazdırdık
y.html(e.pageX); // top değerini yazdırdık
});


});


[/js]

Mousenin kordinantlarını dive verdik. ( mouse takip eden reklam uygulamasıda yapmış olduk :) )

Demo : Demoya Bak