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里的each使用方法详解
Dec 22 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
Three.js学习之几何形状
Aug 01 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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 中文处理技巧
2010/04/25 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
vue 实现微信浮标效果
2019/09/01 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
详解python 爬取12306验证码
2019/05/10 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
Python将字典转换为XML的方法
2020/08/01 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
中英双版中文教师求职信
2013/10/27 职场文书
区级文明单位申报材料
2014/05/15 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
小学安全工作总结2015
2015/05/18 职场文书
现实表现证明材料
2015/06/19 职场文书
运动会宣传稿50字
2015/07/23 职场文书