web中實現動畫的5種方式及例項

2021-08-28 01:40:02 字數 806 閱讀 3300

1.css3的transition;

例項：滑鼠移入時盒子寬度逐漸變大為300px
2.css3的animattion+keyframes;

例項：盒子左右無限迴圈運動
3.使用window.settimout()或者window.setinterval();

例項：盒子左右無限迴圈運動
此方法的缺點是，可能會出現卡頓的現象，動畫不順暢

4.使用jquery動畫相關的api;

例項：改變盒子寬度



animate


reset
當然jquery中實現動畫的api可不止這些，除了自定義動畫之外，還有

顯示與隱藏：hide(),show(),toggle();

滑動：slidedown(),slideup(),slidetoggle();

淡入淡出：fadein(),fadeout(),fadetoggle(),fadeto();

動畫的操作：delay(),stop(),finish();

5.window.requestanimationframe()方法;

例項：盒子左右無限迴圈運動
需要注意的是，如果想得到連貫的逐幀動畫，函式中必須重新呼叫

requestanimationframe()，另外此方法是比較新的一種方法，需要注意下其相容性的處理

web動畫實現的多種方式

html5 css3時代，我們要在web裡做動畫選擇其實已經很多了 你可以用css3的animattion keyframes 你也可以用css3的transition 你還可以用通過在canvas上作圖來實現動畫，也可以借助jquery動畫相關的api方便地實現 當然最原始的你還可以使用windo...

js實現繼承的5種方式

js是門靈活的語言，實現一種功能往往有多種做法,ecmascript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式 1.使用物件冒充實現繼承 該種實現方式可以實現多繼承 實現原理 讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關...

js實現繼承的5種方式

js是門靈活的語言，實現一種功能往往有多種做法,ecmascript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式 1.使用物件冒充實現繼承 該種實現方式可以實現多繼承 實現原理 讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關...