Perbincangan ringkas tentang kaedah offset() jQuery dan contoh sharing

Perbincangan ringkas tentang kaedah offset() jQuery dan contoh sharing_jquery

WBOY

Lepaskan： 2016-05-16 15:49:57

asal

945 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.