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 indexOf函数使用说明
Jul 03 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
JavaScript插入排序算法原理与实现方法示例
Aug 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面向对象精要总结
2014/11/07 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
javascript定义函数的方法
2010/12/06 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python Requests安装与简单运用
2016/04/07 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python实现图片文件批量重命名
2020/03/23 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
投标单位介绍信
2014/01/09 职场文书
超市采购员岗位职责
2014/02/01 职场文书
干部作风建设工作总结
2014/10/29 职场文书
乐山大佛导游词
2015/02/02 职场文书