動畫:
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...