js滑動動畫效果
阿新 • • 發佈：2018-11-06
使用js製作簡單的滑動動畫效果（初級）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS animation</title>
<style>
*{ margin: 0; padding: 0; }
div{ background-color: green; width: 100px; height: 100px; }
</style>
</head>
<body>
<div 我們知道，由於視覺停留，那些靜態的畫面組合起來才會讓我們有動畫的錯覺。這裡我每秒移動這個小方塊24次，每次移動5px，利用這種錯覺讓它看起來是在緩慢移動。
先對div1的style進行設定，使我們能夠通過left控制它的偏移量。偏移量由n控制，n一直在遞增。
由於動畫需要停止，所以我們通過if判斷在n>100的時候清除名稱為id的interval，讓它不再起作用。