`

用JS编写JQuery插件版的动画播放器

 
阅读更多

最近再做个一个移动平台的小网游,其中部分页面要用到一个连续播放图片的小插件,于是乎写了个简单的。

代码很简单,播放个小动画就够了,注释部分有时间我会补上。这里只是简单讲下,_scripts定义了一组序列用来表示动画'boss'的每一帧,我省略了一部分。其代码如同:

 

_scripts={
'boss':[
['图片地址 as string', '持续时间 as int', '跳转帧序号 as int']
],[...]
}

其中持续时间是个参量,默认间隔每100毫秒为一个单位,这个参量指定了其与默认间隔的倍数,默认为1。跳转帧指定了其播放后的下一帧位置,指该数组的键,不提供则在本帧播放后自动停止。

 

使用时像这样:

 

<script type="text/javascript" src="../js/lib/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../js/lib/player.js"></script>
<script type="text/javascript">
$(function(){
    $('#_player').player('帧序列称',{i:“开始帧编号”});
})
</script>

 

HTML的部分只要这样:

 

 <div id="_player"></div>
 

提供三个常规方法:

  1. play([帧序列称 as string], options) :播放某组帧动画。
  2. stopIt():终止动画
  3. setScript(帧序列称 as string):设置帧序列

注:options包含了interval, width, height, i, m几个设置变量。其中interval表示默认帧间隔,毫秒计;width,height分别表示容器宽高;i表示默认播放此帧,默认0;m暂时保留。

 

如果在构造时指定了"帧序列名",则在加载完成后将自动播放动画,不过目前暂时没写预加载处理机制。此方法可在ios或android上跑,暂定如此。

 

期待高人指点!

 

分享到:
评论

相关推荐

    jquery插件使用方法大全

    plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介  jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...

    jQuery向上滑动带缓冲动画的换焦点图插件.rar

    一款带动画效果的图片轮显特效,向上滑动带缓冲动画,弹跳两下最终停下来,很有弹性的视觉效果,由jquery插件打造的功能,在编写时,除了使用jquery插件自身外,还使用了两款辅助插件:jquery.easing.js和jquery....

    jQuery 1.6版本至1.9版本 一个兼容多浏览器的javascript框架

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)...除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

    jquery百叶窗动画

    基于jquery的百叶窗动画。动画是用js编写的。

    jquery常用工具集合JQuery常用工具集合为用户整理了众多jquery的插件,用户下载后可以直接使用

    JQuery常用工具集合为用户整理了众多jquery的插件,用户下载后可以直接使用,可以完美兼容各大浏览器,给用户编写代码带来无限便捷 个人把常用的一些jquery插件做了一个demo。 Jquery继prototype之后又一个优秀的...

    jQuery插件thickbox遮罩层的使用及demo演示示例.rar

    ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容. 点击这里查看演示 特性: ThickBox 是...

    jQuery - 3.6.0

    凭借多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式 本资源包含jQuery-3.6.0(压缩版本与未压缩版本) 压缩版本:开发时使用,更轻量 未压缩版本:易于学习理解 使用方法:解压后直接将.js...

    jQuery-Pulgins:我的日常工作 jQuery 插件

    jQuery 插件我的日常工作 jQuery 插件==== star.js ==== 描述:明星的jQuery插件注意:我第一次尝试编写 jQuery 插件。 ====滑块.js ==== 描述:滑块的jQuery插件版本:1.0 日期 : 2013-10-15 14:00:09 版本:1.0.1 ...

    jquery-1.8.0.js

    jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和...通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式

    jQuery API 一个兼容多浏览器的javascript框架

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)...除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

    JavaScript编写带有动画效果的炫彩点名器

    JavaScript配合jQuery开场动画,点击按钮所有被选项有3秒随机颜色效果,适用于JavaScript初学者学习,课堂使用,列表数据可在代码进行修改

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐jQuery动画翻转选项卡(flip风格) 3)表单验证 1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP...

    html+css+javaScript+jQuery 制作的Table

    自己编写的一个Html的Table 利用html,css实现了页面的表示,利用javaScript和jQuery实现了页面的动画效果。

    JQuery权威指南源代码

    使用jQuery UI插件以拖动方式管理相册 第9章 使用browser对象获取浏览器信息 使用boxModel对象检测是否是W3C盒子模型 使用$.each()工具函数遍历数组 使用$.each()工具函数遍历ajaxSettings对象 使用$.grep()...

    jQuery权威指南-源代码

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jQuery 1.3 API中文版

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写的更少,做的更多)。...除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

    JQuery_1.4_API_简体中文

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)...除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

    traceit:基于raphael.js的jQuery插件,可让您动态跟踪页面元素。 现在也可以作为AngularJs指令使用

    它是使用jQuery原型继承插件样板编写的:Alex Sexton和Scott Gonzalez。 traceit将动态跟踪添加到页面上的任何元素; 配置其笔触宽度,动画速度,笔触/填充颜色和不透明度以及onHide,onClick和onEndTrace回调函数...

    Jquery2.0电子书

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)...除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

Global site tag (gtag.js) - Google Analytics