動態得到相關元素的位置、大小
1.獲得元素距離帶有定位的父元素的位置
2.獲得元素自身的大小
返回的數值都不帶單位
offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值
offsetleft
offsetwidth 可以得到元素的大小 寬度和高度 是包含padding + border + width
offsetheight
offsetparent 返回帶有定位的父親 否則返回的是body
parentnode 返回父親 是最近一級的父親 不管父親有沒有定位
offset與style的區別：style只能得到行內樣式表的樣式值；style.width獲得的是帶有單位的字串，offset獲得的是數值；style.width不包含padding + border，offset包含；style.width可以賦值，offset不能賦值；所以獲取值用offset，更改值用style
通過client的屬性可以得到相關元素的邊框大小、元素大小等
與offset的區別在於，client返回的寬度高度不包含邊框；clienttop返回元素上邊框的大小，clientleft返回元素左邊框的大小
使用相關屬效能得到該元素的大小、滾動距離等
scrolltop：返回元素被捲曲的上測距離，返回值不帶單位
scrollleft：返回元素被捲曲的左測距離，返回值不帶單位
scrollwidth：返回自身實際寬度（如果有超出的內容會被算到裡面），不含邊框，返回值不帶單位
scrollheight：返回自身實際高度（如果有超出的內容會被算到裡面），不含邊框，返回值不帶單位
window.pageyoffset：頁面被卷去的頭部
window.pagexoffset：頁面被卷去的左部
三者的主要用法：
offset：用於獲取元素位置 offsettop、offsetleft
client：用於獲取元素大小 clientwidth、clientheight
scroll：用於獲取滾動距離 scrolltop、scrollleft
通過定時器setinterval()不斷移動盒子的位置
實現步驟：
1.獲得當前盒子位置
2.讓盒子在當前位置加1個移動距離
3.利用定時器不斷重複這個操作
4.加乙個定時器結束的條件
5.該元素一定要新增定位，才能使用style.left
動畫函式的封裝
需要的兩個引數：動畫物件和移動距離
動畫函式給不同元素記錄不同定時器：給當前物件新增屬性
function
animate
(obj, target)
obj.style.left = obj.offsetleft +1+
'px';}
,30);
}
讓元素運動速度有所變化，最常見是讓元素慢慢停下來
原理：
讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來
核心演算法：（目標值-現在位置）/10 做為每次移動的距離，步長
停止條件：讓盒子位置等於目標位置就停止定時器
function
animate
(obj, target)
// 把每次加1 這個步長值改為乙個慢慢變小的值 步長公式：(目標值 - 現在的位置) / 10
obj.style.left = obj.offsetleft + step +
'px';}
,15);
}
2.設定、讀取方便、甚至頁面重新整理都不會丟失資料
3.容量較大：sessionstorage約5m，localstorage約20m
4.只能儲存字串，可以將物件json.stringfy()編碼後儲存
window.sessionstorage
1.生命週期為關閉瀏覽器視窗
2.同乙個頁面下資料可以共享
3.以鍵值對的形式儲存使用
儲存資料：sessionstorage.setitem(key,value);
獲取資料：sessionstorage.getitem(key);
刪除資料：sessionstorage.remove(key);
刪除所有資料：sessionstorage.clear();
window.localstorage
1.生命週期永久生效，除非手動刪除
2.可以共享視窗
3.以鍵值對的形式儲存使用
儲存資料：localstorage.setitem(key,value);
獲取資料：localstorage.getitem(key);
刪除資料：localstorage.remove(key);
刪除所有資料：localstorage.clear();
PC端網頁特效 offset系列屬性
offset概述 offset翻譯是偏移量，使用offset系列相關屬性可以動態的得到該元素的位置 偏移 大小等。獲得元素距離帶有定位父元素的位置 獲得元素自身的大小 寬度高度 注意 返回的數值都不帶單位 offset系列屬性 作用 element.offsetparent 返回作為該元素帶有定位的...
pc端rem適配 自適應PC端網頁製作使用REM
做乙個pc端的網頁,設計圖是1920x1080的.要在常見屏上顯示正常 比例正確可 1280x720 1366x768 1440x900 1920x1080 使用了幾種辦法 1.內容在一屏內顯示的,採用了 內容框 上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是...
網頁自適應pc端和移動端
手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。很多 的解決方法，是為不同的裝置提供不同的網頁，比如專門提供乙個mobile版本，...