Javascript原生动画效果的实现

概述

这里介绍一种计时器。

setInterval(code, ms)
周期性的执行一段代码，前一个参数是周期执行的代码，后一个是循环的周期，单位毫秒。
clearInterval()
清除计时器。

原理

动画一：显示和隐藏图片

<img id="imgAd" src="images/ad.jpg" alt="无法显示">

var timer;
var cleartime;
var len = 0;

window.onload = function() {
timer = setInterval(showAd, 1);
}

function showAd() {
var adImg = document.getElementById("imgAd");
len++;
if (len >= 800) {
clearInterval(timer);
cleartime = setInterval(hideAd, 1);
}
adImg.style.width = len*1.25+"px";
adImg.style.height = len+"px";
}

function hideAd() {
var adImg = document.getElementById("imgAd");
len--;
if (len == 0) {
clearInterval(cleartime);
}
adImg.style.width = len+"px";
adImg.style.height = len+"px";
}