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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 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
一个改进的UBB类
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
jquery图片上下tab切换效果
2011/03/18 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
js a标签点击事件
2017/03/30 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python爬取内容存入Excel实例
2019/02/20 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Python偏函数实现原理及应用
2020/11/20 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
ktv总经理岗位职责
2014/02/17 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
四查四看整改措施
2014/09/19 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
毕业设计致谢语
2015/05/14 职场文书