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获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
JavaScript ES6的函数拓展
Jan 18 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
删除无限级目录与文件代码共享
2006/07/12 PHP
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
详解python数据结构和算法
2019/04/18 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python实现翻译word表格小程序
2020/02/27 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
结婚喜宴家长答谢词
2014/01/15 职场文书
《故乡》教学反思
2014/04/10 职场文书
新教师岗前培训方案
2014/06/05 职场文书
感谢信的格式
2015/01/21 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA