動畫以及封裝

2022-09-10 11:21:15 字數 850 閱讀 2982

offset client scroll 系列

offset系列

offsetleft:獲取元素距離最左邊的距離:

如果父元素沒有定位,距離瀏覽器最左側的距離

如果父元素有定位,距離父元素最左側的距離

offsetwidth:獲取元素的寬度,包括border及以內,不包括margin

offsetheight:獲取元素的高度,包括border及以內,不包括margin

offsetparent:獲取元素的定位父級元素

如果元素fixed定位,得到null;  

元素沒有fixed情況下如果元素所有的父級元素都沒定位,得到body;

元素沒有fixed情況下,父級元素有定位,得到離他最近的有定位的父級元素

scroll系列

scrolltop內容捲曲出去的高度

scrollleft內容捲曲出去的寬度

scrollwidth   實際寬度

scrollheight:獲得元素的實際高度

client系列

clienttop和clientleft:獲得上邊框和左邊框的寬度。

clientwidth和clientheight:獲取可視範圍的寬度高度,即邊框內部的,不包括

border,包括padding.當盒子內部存在滾動條時,獲得的高度和寬度不包括滾動條。

JS動畫封裝

簡單的運動函式 var demo1 document.getelementbyid demo1 demo1.onmouseover function demo1.onmouseout function var timer 全域性變數 function startmove target else 變速...

jQuery封裝的動畫

jquery中的固定動畫 show 相當於display block 可以加引數,引數1 為時間 引數2 為動畫完成 hide 相當於display none 引數1 為時間 引數2 為動畫完成 btn click function 隱藏 btn1 click function 顯示toggle s...

變速動畫函式封裝

function animate element,attr,target 測試 console.log 目標位置 target 當前位置 current 每次移動的步數 step 20 offset系列 scroll系列 scrollwidth 獲取元素的實際內容的寬度,如果實際內容沒有佔滿一行,獲...