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 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
Vue事件处理原理及过程详解
Mar 11 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的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
javascript类型转换示例
2014/04/29 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python计算两个地址之间的距离方法
2018/06/09 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
什么是servlet链?
2014/07/13 面试题
化学相关工作求职信
2013/10/02 职场文书
优良学风班申请材料
2014/02/13 职场文书
实习单位鉴定评语
2014/04/26 职场文书
相亲大会策划方案
2014/06/05 职场文书
公司董事长岗位职责
2014/06/08 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2016情人节宣传语
2015/07/14 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Redis主从复制操作和配置详情
2022/09/23 Redis