JavaScript 图像动画的小demo


Posted in Javascript onMay 23, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>图形动画</title> 
<style type="text/css"> 
.de{ font-size:30px; text-decoration:none; font-family:微软雅黑; color:#ccc;} 
.de:hover{ color:#933;} 
</style> 
<script type="text/javascript"> 
/** 
* ImageLoop.js: An ImageLoop class for performing image animations 
* 
* Constructor Arguments: 
* imageId: the id of the <img> tag which will be animated 
* fps: the number of frames to display per second 
* frameURLs: an array of URLs, one for each frame of the animation 
* 
* Public Methods: 
* start(): start the animation (but wait for all frames to load first) 
* stop(): stop the animation 
* 
* Public Properties: 
* loaded: true if all frames of the animation have loaded, 
* false otherwise 
*/ 
function ImageLoop(imageId, fps, frameURLs) { 
// Remember the image id. Don't look it up yet since this constructor 
// may be called before the document is loaded. 
this.imageId = imageId; 
// Compute the time to wait between frames of the animation 
this.frameInterval = 1000 / fps; 
// An array for holding Image objects for each frame 
this.frames = new Array(frameURLs.length); this.image = null; // The <img> element, looked up by id 
this.loaded = false; // Whether all frames have loaded 
this.loadedFrames = 0; // How many frames have loaded 
this.startOnLoad = false; // Start animating when done loading? 
this.frameNumber = -1; // What frame is currently displayed 
this.timer = null; // The return value of setInterval() 
// Initialize the frames[] array and preload the images 
for (var i = 0; i < frameURLs.length; i++) { 
this.frames[i] = new Image(); // Create Image object 
// Register an event handler so we know when the frame is loaded 
this.frames[i].onload = countLoadedFrames; // defined later 
this.frames[i].src = frameURLs[i]; // Preload the frame's image 
} 
// This nested function is an event handler that counts how many 
// frames have finished loading. When all are loaded, it sets a flag, 
// and starts the animation if it has been requested to do so. 
var loop = this; 
function countLoadedFrames() { 
loop.loadedFrames++; 
if (loop.loadedFrames == loop.frames.length) { 
loop.loaded = true; 
if (loop.startOnLoad) loop.start(); 
} 
} 
// Here we define a function that displays the next frame of the 
// animation. This function can't be an ordinary instance method because 
// setInterval() can only invoke functions, not methods. So we make 
// it a closure that includes a reference to the ImageLoop object 
this._displayNextFrame = function () { 
// First, increment the frame number. The modulo operator (%) means 
// that we loop from the last to the first frame 
loop.frameNumber = (loop.frameNumber + 1) % loop.frames.length; 
// Update the src property of the image to the URL of the new frame 
loop.image.src = loop.frames[loop.frameNumber].src; 
}; 
} 
/** 
* This method starts an ImageLoop animation. If the frame images have not 
* finished loading, it instead sets a flag so that the animation will 
* automatically be started when loading completes 
*/ 
ImageLoop.prototype.start = function () { 
if (this.timer != null) return; // Already started 
// If loading is not complete, set a flag to start when it is 
if (!this.loaded) this.startOnLoad = true; 
else { 
// If we haven't looked up the image by id yet, do so now 
if (!this.image) this.image = document.getElementById(this.imageId); 
// Display the first frame immediately 
this._displayNextFrame(); 
// And set a timer to display subsequent frames 
this.timer = setInterval(this._displayNextFrame, this.frameInterval); 
} 
}; 
/** Stop an ImageLoop animation */ 
ImageLoop.prototype.stop = function () { 
if (this.timer) clearInterval(this.timer); 
this.timer = null; 
}; 
</script> 
<script type="text/javascript"> 
function de() { 
var animation = new ImageLoop("loop", 1, ["img/img_01.jpg", "img/img_02.jpg",]); 
var sta = document.getElementById("sta"); 
var stp = document.getElementById("stp"); 
sta.onclick = function () { 
animation.start(); 
} 
stp.onclick = function () { 
animation.stop(); 
} 
} 
window.onload = function () { 
de(); 
} 
</script> 
</head> 
<body> 
<img src="img/img_01.jpg" id="loop" alt="" title="" /> 
<a href="#" class="de" id="sta">Start</a> 
<a href="#" class="de" id="stp">Stop</a> 
</body> 
</html>
Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
jquery实现手风琴案例
May 04 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
JavaScript学习笔记记录我的旅程
May 23 #Javascript
JS中处理与当前时间间隔的函数代码
May 23 #Javascript
自己做的模拟模态对话框实现代码
May 23 #Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 #Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 #Javascript
JavaScript基本编码模式小结
May 23 #Javascript
Javascript处理DOM元素事件实现代码
May 23 #Javascript
You might like
两种php调用Java对象的方法
2006/10/09 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
js计数器代码
2006/11/04 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python使用turtule画五角星的方法
2015/07/09 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
python logging通过json文件配置的步骤
2020/04/27 Python
实例代码讲解Python 线程池
2020/08/24 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
保健品市场营销方案
2014/03/31 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
家长学校培训材料
2014/08/20 职场文书
骨干教师考核评语
2014/12/31 职场文书
2015党建工作简报
2015/07/21 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
基于Python实现将列表数据生成折线图
2022/03/23 Python