❶ 怎樣用js把CSS動畫封裝起來
1.進入網站有一個視頻，希望視頻播放完之後觸發動畫，但是視頻受網路影響，實際播放完成的時間不好控制。
2.所以css的延遲時間不好控制，如果視頻卡了一下，時間就錯過了
3.怎樣能在視頻完成的時候觸發animation呢?
4.下面是動畫，div從左到右運動
#banner-cloud-1{
position: absolute;
top: 0px;
left: 0;
-webkit-animation:cloud-move-1 5s linear;
-o-animation:cloud-move-1 5s linear;
animation:cloud-move-1 5s linear;
-webkit-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes cloud-move-1{
from{
left: 0;
}
to{
left:-3760px;
}
}
5.下面是視頻結束時觸發的函數
videos.onended = function(){
//觸發事件一
//觸發事件二
//觸發事件三
//........
//觸發上面的 animation 動畫
}
❷ 如何用js設置@keyframe的動態參數
不知道是為了什麼效果呢？keyframe本來就已經是關鍵幀了，如果想設置在某個位置顯示某個角度，可以設置10%、20%等幀位，樓主想用js控制它的旋轉角度不是和CSS3的動畫相沖突嗎？
❸ 如何用js動態設置class屬性
1、JavaScript允許你更改元素的class或id。當你更改之後，瀏覽器會自動更新元素的樣式。
2、是className，可不是class
注意：回JavaScript使用答的是className去訪問class屬性，因為class是一個保留關鍵字，因為將來JavaScript可能開始支持像Java一樣的類。
❹ 網頁中的幻燈片如何製作
步驟一：圖形元素的製作和准備。
製作幻燈片所用的圖片並將之放入Dreamweaver的層中。我們准備在每個幻燈片中實現7幅圖片的交替變換，因此我們需要製作7幅內容不同的圖片。注意圖片要在Photoshop中進行優化壓縮，並調整成相同的尺寸。建立一個層，插入初始圖片，該圖片就是幻燈片默認得頭一張圖片。將層命名為Layer_main，並把該層的Index值設為1。
步驟二：製作播放器的外觀和四個控制按鈕。
利用Photoshop製作一個金屬效果的播放器外觀。（具體效果就看你的喜好啦，也許你可從Winamp的skin中受點啟發）。作最佳優化後，輸出一個透明的GIF圖片。為了讓滑鼠移上後按鈕有些變化，你不得不每個按鈕製作2張圖片（共6個），兩個按鈕只需有顏色上的差異即可。先建三個層，調整好位置，並插入三個播放鍵的各自的二張翻滾圖片（Rollover Image）（Insert-Rollover Image）。通過調節層的Index-Z的值，確保播放器所在的層在Layer_main層的上面，在按鈕所在層的下面。排版好的各層。
步驟三：創建幻燈片播放時間鏈。
按Ctrl+F9鍵打開時間鏈浮動工具面板。選取其中幻燈片所在層(Layer_main)中的初始圖片(確保選取的是圖像，而不是層)，用滑鼠拖至時間鏈浮動工具面板，在時間鏈起始處釋放滑鼠。設定幀速率為Fps為5，並勾選Loop框。選擇時間鏈中的其中一幀，右擊滑鼠，選擇"Add Keyframe"（添加關鍵幀），選擇另一幅幻燈片圖片，以更換層(Layer_main)中的初始圖片。重復這個操作，將剩下的5幅圖片全部加到該時間鏈的不同關鍵幀上。最後適當調節各關鍵幀之間的距離。並將該時間鏈命名為TimeLine_main。建立好的時間鏈。
步驟四：為按鈕和其它添加行為（Behavior）。
點擊選擇PLAY按鈕所在的圖片，在行為浮動工具面板中，從+（添加）動作下拉列表中選擇Timeline-Play Timeline(播放時間鏈)，並在彈出的對話框中選擇時間鏈Timeline_main。單擊OK。默認方式下，就會為切換動作設置一個onClick事件。點擊選擇PAUSE所在的圖片。在行為浮動工具面板中，從+（添加）動作下拉列表中選擇Timeline---Stop Timeline(停止播放時間鏈)，並在彈出的對話框中選擇時間鏈Timeline_main。單擊OK。默認方式下，就會為切換動作設置一個onClick事件。
點擊選擇REPLAY所在的圖片。在行為浮動工具面板中，從+（添加）動作下拉列表中選擇Timeline---Go to Timeline Frame(轉向放時間鏈幀)，並在彈出的對話框中選擇時間鏈Timeline_main，在Frame文本框中輸入1。單擊OK。默認方式下，就會為切換動作設置一個onClick事件。再添加下一個動作。從+（添加）動作下拉列表中選擇Timeline---Play Timeline(播放時間鏈)，並在彈出的對話框中選擇時間鏈Timeline_main。單擊OK。默認方式下，就會為切換動作設置一個onClick事件。REPLAY的圖片添加好的行為。
進一步，為了讓播放器更加生動，你可以同時給幻燈片的播放加上聲音。