Rumah > Artikel > hujung hadapan web > Perbincangan ringkas tentang kaedah offset() jQuery dan contoh sharing_jquery

Perbincangan ringkas tentang kaedah offset() jQuery dan contoh sharing_jquery

WBOYasal: 2016-05-16 15:49:57940semak imbas

Takrifan dan penggunaan kaedah offset():

Kaedah ini mengembalikan atau menetapkan offset elemen dipadankan berbanding objek dokumen.

Struktur Tatabahasa 1:

$(selector).offset()
Dapatkan pengimbangan relatif elemen padanan dalam dokumen semasa.
Objek yang dikembalikan mengandungi dua sifat integer: atas dan kiri.
Kaedah ini hanya berfungsi pada elemen yang boleh dilihat.
Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 border:1px solid black;
 width:400px;
 height:300px;
 padding:10px;
 margin:50px;
}
.children{
 height:150px;
 width:200px;
 margin-left:50px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
   a=$(".children").offset();
   alert("元素的偏移量坐标是："+a.top+"|"+a.left+"");
  })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>获取元素的坐标</button>
</body>
</html>

Kod di atas boleh memaparkan offset sub-div berbanding dokumen.

Struktur tatabahasa 2:

$(selector).offset(value)

Tetapkan koordinat elemen padanan berbanding objek dokumen.
Kaedah offset() membolehkan kami menetapkan semula kedudukan elemen. Kedudukan elemen ini adalah relatif kepada objek dokumen.
Jika atribut gaya kedudukan asal objek adalah statik, ia akan ditukar kepada relatif untuk melaksanakan penempatan semula.
Senarai parameter:

Penerangan Parameter
nilai menentukan koordinat atas dan kiri dalam piksel.

Nilai yang mungkin:

1. Pasangan nilai, seperti {atas:200,kiri:10}.
2. Objek dengan atribut atas dan kiri.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">

<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset({top:100,left:100})
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Kod di atas boleh menetapkan offset div berbanding dokumen.

Struktur tatabahasa tiga:

Gunakan nilai pulangan fungsi untuk menetapkan koordinat offset:

$(selector).offset(function(index,oldoffset))
Senarai parameter:

Penerangan Parameter
function(index,oldvalue) menentukan fungsi yang mengembalikan koordinat offset baharu bagi elemen yang dipilih:
indeks - pilihan. Indeks unsur.
nilai lama - pilihan. koordinat semasa.

Contoh kod:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.father{
 border:1px solid black;
 width:400px;
 height:300px;
}
.children{
 height:150px;
 width:200px;
 background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $(".children").offset(function(a,b){
   var newpoint= new Object();
   newpoint.top=b.top+50;
   newpoint.left=b.left+50;
   return newpoint;
  })
 })
})
</script>
</head>
<body>
<div class="father">
 <div class="children"></div>
</div>
<button>点击设置偏移量</button>
</body>
</html>

Kod di atas juga boleh menetapkan offset elemen, tetapi nilai dikembalikan melalui fungsi.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery melaksanakan kaedah memasukkan elemen baharu sebelum elemen_jquery terakhirArtikel seterusnya：jQuery melaksanakan kaedah memasukkan elemen baharu sebelum elemen_jquery terakhir

Artikel berkaitan

Lihat lagi