018_位置和偏移
1. offset()方法
1.1. offset()方法返回或設置匹配元素相對于文檔的偏移(位置)。
1.2. 返回偏移坐標
1.2.1. offset()方法返回第一個匹配元素的偏移坐標。
1.2.2. offset()方法返回的對象包含兩個整型屬性: top和left, 以像素計。此方法只對可見元素有效。
1.2.3. 語法
$(selector).offset()1.3. 設置偏移坐標
1.3.1. offset(value)方法設置每個匹配元素的偏移坐標。
1.3.2. 語法
$(selector).offset(value)1.3.3. 參數
1.4. 使用函數來設置偏移坐標
1.4.1. offset(function(index,oldoffset))使用函數來設置每一個匹配元素的偏移坐標。
1.4.2. 語法
$(selector).offset(function(index,oldoffset))1.4.3. 參數
1.5. 例子
1.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>offset</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var x = $("p").offset();alert("p元素相對于文檔左偏移: " + x.left + " ,上偏移: " + x.top);});$('#btn2').click(function(){$("p:first").offset({left: 10, top: 10});});});</script><style type="text/css">* {margin: 0; padding: 0;}div {background-color: pink; margin: 10px; padding: 7px;}p {margin: 10px; padding: 7px;}</style></head><body><div><p style="background-color: red;">offset()方法返回或設置匹配元素相對于文檔的偏移(位置)。</p></div><div><p style="background-color: green;">offset()返回第一個匹配元素的偏移坐標。</p></div><button id="btn1">文檔的偏移</button> <button id="btn2">設置偏移</button></body> </html>1.5.2. 效果圖
2. position()方法
2.1. position()方法返回第一個匹配元素相對于父元素的位置(偏移)。
2.2. position()方法返回的對象包含兩個整型屬性: top和left, 以像素計。
2.3. 此方法只對可見元素有效。
2.4. 語法
$(selector).position()2.5. 例子
2.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>position()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var x = $("p").position();alert("相對于父元素左邊位置: " + x.left + " ,相對于父元素上邊位置: " + x.top);});$('#btn2').click(function(){var x = $("#div2 > p").position();alert("相對于父元素左邊位置: " + x.left + " ,相對于父元素上邊位置: " + x.top);});});</script><style type="text/css">* {margin: 0; padding: 0;}div {width: 600px;height: 200px;}#div1 {background: red;padding: 10px 20px;}#div2 {background: green;position: relative;}p {background: pink;width: 300px;height: 100px;}#div2 > p {position: absolute;top: 30px;left: 50px;}</style></head><body><div id="div1"><p>position()方法返回第一個匹配元素相對于父元素的位置(偏移)。</p></div><div id="div2"><p>position()方法返回的對象包含兩個整型屬性: top和left, 以像素計。</p></div><br /><button id="btn1">相對于父元素的位置</button> <button id="btn2">絕對定位相對于父元素的位置</button></body> </html>2.5.2. 效果圖
3. scrollLeft()方法
3.1. scrollLeft()方法返回或設置匹配元素的滾動條的水平位置。
3.2. 滾動條的水平位置指的是從其左側滾動過的像素數。當滾動條位于最左側時, 位置是0。
3.3. 該方法對于可見元素和不可見元素均有效。
3.4. 返回水平滾動條位置
3.4.1. scrollLeft()方法返回第一個匹配元素的水平滾動條位置。
3.4.2. 語法
$(selector).scrollLeft()3.5. 設置水平滾動條位置
3.5.1. scrollLeft(position)方法設置每一個匹配元素的水平滾動條位置。
3.5.2. 語法
$(selector).scrollLeft(position)3.5.3. 參數
4. scrollTop()方法
4.1. scrollTop()方法返回或設置匹配元素的滾動條的垂直位置。
4.2. 滾動條的垂直位置指的是從其頂部滾動過的像素數。當滾動條位于最頂部時, 位置是0。
4.3. 該方法對于可見元素和不可見元素均有效。
4.4. 返回垂直滾動條位置
4.4.1. scrollTop()方法返回第一個匹配元素的垂直滾動條位置。
4.4.2. 語法
$(selector).scrollTop()4.5. 設置垂直滾動條位置
4.5.1. scrollTop(offset)方法設置每一個匹配元素的垂直滾動條位置。
4.5.2. 語法
$(selector).scrollTop(offset)4.5.3. 參數
4.6. 例子
4.6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>scrollLeft()和scrollTop()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){alert("第一個div左邊滾動條的位置: " + $("div").scrollLeft() + " ,第一個div上邊滾動條的位置: " + $("div").scrollTop());});$('#btn2').click(function(){$("div").scrollLeft(20);$("div").scrollTop(50);});});</script><style type="text/css">div {width: 200px;height: 200px;background: red;overflow: auto;}</style></head><body><div><p><h2>scrollLeft()方法</h2>1. scrollLeft()方法返回或設置匹配元素的滾動條的水平位置。<br />2. 滾動條的水平位置指的是從其左側滾動過的像素數。當滾動條位于最左側時, 位置是0。<h3>返回水平滾動條位置</h3>1. scrollLeft()方法返回第一個匹配元素的水平滾動條位置。<br />2. 語法<br />$(selector).scrollLeft()<h3>設置水平滾動條位置</h3>1. scrollLeft(position)方法設置每一個匹配元素的水平滾動條位置。<br />2. 語法<br />$(selector).scrollLeft(position)</p></div><div><p><h2>scrollTop()方法</h2>1. scrollTop()方法返回或設置匹配元素的滾動條的垂直位置。<br />2. 滾動條的垂直位置指的是從其頂部滾動過的像素數。當滾動條位于最頂部時, 位置是0。<h3>返回垂直滾動條位置</h3>1. scrollTop()方法返回第一個匹配元素的垂直滾動條位置。<br />2. 語法<br />$(selector).scrollTop()<h3>設置垂直滾動條位置</h3>1. scrollTop(offset)方法設置每一個匹配元素的垂直滾動條位置。<br />2. 語法<br />$(selector).scrollTop(offset)</p></div><br /><button id="btn1">返回滾動條的位置</button> <button id="btn2">設置滾動條的位置</button></body> </html>4.6.2. 效果圖
?
總結
