基礎js動畫

2022-09-10 12:06:15 字數 1162 閱讀 8551

獲取元素的樣式

getstyle函式

此函式返回的是乙個字串,需要呼叫 parseint() 或者 parsefloat() 將返回的結果轉換為數字值。

動畫分類

1.簡單動畫

2.緩衝動畫

3.透明度動畫

注意

使用 getstyle 函式獲取的 opacity 屬性是乙個浮點數,不能使用 parseint() 對其進行轉化,應該使用 parsefloat() 。 

將 opacity 的值乘以 100 ,然後呼叫 math.round() ,將浮點數變成整數。(永遠不要比較兩個浮點數是否相等,結局絕對會出人意料。)

1.如果需要將元素恢復到動畫之前的樣子,動畫的運動方式應該一致,否則在特殊情況下會出一些 bug 。

讓圖動起來的具體方式方法

一、讓div動起來

var obtn = document.getelementbyid('btn1');

var timer='';//設定定時器

obtn.onclick=function startmove()else

},30);

}二、淡入淡出效果

var timer=null;

var alpha=30;

function startmove(itarget,ispeed)else

},30);

}window.onload=function()

oimg.onmouseout=function()

三、實現緩動效果

var obtn = document.getelementbyid('btn1');

var timer='';

obtn.onclick=function startmove(itarget)else

},30);

}四、勻速運動停止條件:與目標點無限接近即可

timer=setinterval(function()else

if(math.abs(odiv.offsetleft-itarget)<7)else

},30);

004 CSS3動畫和JS動畫基礎篇

過渡有transition property transition duration transition timing function transition delay四個屬性,當然過渡也提供了transition簡寫。當觸發過渡事件結束後,各屬性通過相同的過渡回到預設屬性,延遲相同,但是tra...

JS動畫基礎 閃動,勻速,緩動。

廢話不多說,直奔主題。先是html部分。閃動!勻速!緩動!然後css部分 這裡要注意 div必須帶上絕對定位,不然運動不起來 div1 js部分 var div document.getelementbyid div1 var btn document.getelementbyid btn1 var...

JS動畫封裝

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