Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kedudukan elemen dalam jquery
Bagaimana untuk menetapkan kedudukan elemen dalam jquery
- 青灯夜游asal
- 2022-05-26 14:25:372433semak imbas
Kaedah tetapan: 1. Gunakan offset() untuk menetapkan koordinat offset bagi elemen berbanding dokumen, sintaksnya ialah "elemen object.offset({top: offset value, left: offset value})" ; 2. Gunakan scrollTop() untuk menetapkan kedudukan bar skrol menegak bagi elemen;
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
Banyak cara untuk menetapkan kedudukan elemen dalam jquery
1. Gunakan offset()
Kaedah offset() menetapkan koordinat offset bagi elemen yang dipilih berbanding dengan dokumen.
$(selector).offset({top:value,left:value})Menentukan koordinat atas dan kiri dalam piksel.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
p {
width:150px;
background-color:pink;
padding: 5px;
}
</style>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").offset({
top: 200,
left: 200
});
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>设置P元素的偏移坐标</button>
</body>
</html>
2. Gunakan scrollTop()
Kaedah scrollTop() menetapkan kedudukan bar skrol menegak bagi elemen yang dipilih.
$(selector).scrollTop(position)
Petua: Apabila bar skrol berada di bahagian atas, kedudukannya ialah 0.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollTop(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div><br>
<button>垂直滚动条的位置设置为100px</button>
</body>
</html>
3. Gunakan scrollLeft()
scrollLeft( ) boleh menetapkan offset elemen padanan berbanding sebelah kiri bar skrol, iaitu, kedudukan bar skrol mendatar.
$(selector).scrollLeft(position)
Kedudukan mendatar bar skrol merujuk kepada bilangan piksel yang ditatal dari sebelah kirinya. Apabila bar skrol berada di hujung kiri, kedudukannya ialah 0.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").scrollLeft(100);
});
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>
<button>水平滚动条的位置设置为100 px</button>
</body>
</html>
[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!