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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
如何为你的JavaScript代码日志着色详解
Apr 08 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
简单的php购物车代码
2020/06/05 PHP
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
党风廉设责任书
2014/04/16 职场文书
交通事故协议书范文
2014/04/16 职场文书
优秀家长事迹材料
2014/05/17 职场文书
走进敬老院活动总结
2014/07/10 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang