基礎頁面
為了演示如何通過 JavaScript 來創建 HTML 影片，我們將使用一張簡單的網頁：
實體
<!DOCTYPE html> <html> <body> <h1>我的第一部 JavaScript 影片</h1> <div id="animation">我的影片在這里，</div> </body> </html>
創建影片容器
所有影片都應該與容器元素關聯，
實體
<div id ="container">
<div id ="animate">我的影片在這里，</div>
</div>
為元素添加樣式
應該通過 style = "position: relative" 創建容器元素，
應該通過 style = "position: absolute" 創建影片元素，
實體
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
影片代碼
JavaScript 影片是通過對元素樣式進行漸進式變化編程完成的，
這種變化通過一個計數器來呼叫，當計數器間隔很小時，影片看上去就是連貫的，
基礎代碼是：
實體
var id = setInterval(frame, 5); function frame() { if (/* 測驗是否完成 */) { clearInterval(id); } else { /* 改變元素樣式的代碼 */ } }
使用 JavaScript 創建影片
實體
function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/128421.html
標籤：其他
上一篇：HTML基礎
下一篇：我的網站重新部署啦