動畫js版本

2022-08-09 14:39:16 字數 1331 閱讀 2576

動畫:

1)css樣式提供運動

2)js提供的運動

過渡的屬性:transition 從一種情況到另一種情況叫過渡

transition:變化的屬性  (attr)

transition:花費的時間  (time)

transition:變化的速度( linear)

transition:delay (延遲)向後推遲多少秒發生

transition:display:  顯示隱藏

運動考慮的情況:

距離    時間     步長(速度,在html中單位是畫素,所以叫步長)  總步長   起始距離 (一般跟position:absolute   中的 left    有關 )       當前距離   平均每步(距離除以總步長)

元素的 client offset scroll  系列

clientwidth    client height

client left       client top

offset width      offset height

offset left           offset top            offset parent

scroll width          scroll height

scroll left                scroll top      

這十三個屬性,前面是乙個唯讀屬性         scroll top  和  scroll left 是既可讀,也可寫

獲取瀏覽器的body屬性是有相容的  (主要是針對ie瀏覽器)

var dd=document.body||document.documentelement

獲取body整個文件的高用

var dd=document.body.scrollheight||document.documentelement.scrollheight

獲取瀏覽器螢幕的高

var dd=document.body.clientheight||document.documentelement.clientheight

賦值的時候不能用 ||       只能在獲取元素的時候用  ||

scrolltop和scrollleft   最小值是0;

window下的兩個事件;

onscroll  當滾動條滾動的時候觸發   (寫法為:window.onscroll=function(){})

onresize   當視窗發生改變的時觸發  (寫法為:window.onresize=function(){})

scroll 如果想用這個屬性  必須加overflow:auto;

JS動畫封裝

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

js 動畫函式

呼叫方法 animate obj,target,callback animate 物件,目標值,function function animate obj,target,callback 呼叫的時候 callback 先清除以前的定時器,只保留當前的乙個定時器執行 clearinterval obj...

基礎js動畫

獲取元素的樣式 getstyle函式 此函式返回的是乙個字串,需要呼叫 parseint 或者 parsefloat 將返回的結果轉換為數字值。動畫分類 1.簡單動畫 2.緩衝動畫 3.透明度動畫 注意 使用 getstyle 函式獲取的 opacity 屬性是乙個浮點數,不能使用 parseint...