Javascript原生动画效果的实现

来源：互联网发布：爱情公寓3矩阵编辑：程序博客网时间：2024/04/29 16:34

概述

JS框架越来越多，也越来越好用，如果了解了原生的JS动画的实现方式，能更好的有助于理解JS框架。

这里介绍一种计时器。    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";}

0 0