使用的工具——gifplayer

基本用法：

1.安装

git clone https://github.com/rubentd/gifplayer.git

2.添加一张gif预览的图片

    <img class="gifplayer" src="images/loud.png"/>

3.在预览图片的目录下增加一个文件名相同的gif文件

4.引入jquery.js ,从下载的包中找到目录gifplayer/dist/目录下引入jquery.gifplayer.js文件

使用下面JS脚本来对gifplayer进行控制



$(function(){

//第一步，先初始化gifplayer

var gifplayer = $('.gifplayer').gifplayer({

	label:"",//把label置空，不然会出现gif字样

});

//使用下面代码播放gif

gifplayer.gifplayer("play");

//使用下面代码停止gif

gifplayer.gifplayer("stop");

})

你可以点击查看demo

完成的html代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>gif test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style type="text/css">

        body{

            margin:0;

            padding:0;

        }

    </style>

    <!-- <link rel="stylesheet" href="css/gifplayer.css"> -->

</head>

<body>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.gifplayer.js"></script>

    <img class="gifplayer"  src="images/loud.png"/>

    <button class="control">播放</button>

    <script>

        $(function(){

            var gifplayer = $('.gifplayer').gifplayer({

                label:"",

            });

            var played = false;

            $('.control').on('click',function(){

                if(!played){

                    gifplayer.gifplayer("play");

                    played = true;

                }else{

                    gifplayer.gifplayer("stop");

                    played = false;

                }

            });

        })

    </script>

</body>

</html>

使用gifplayer操作gif的方法的更多相关文章

  1. 一些ES5的操作数组的方法

    在ES5规范中新增了不少操作数组的方法,特此罗列一下以备使用 1. forEach循环 有点类似jQuery的each循环 [12,23,36,4,5].forEach(function(v,k){ ...

  2. JavaScript操作JSON的方法总结，JSON字符串转换为JSON对象

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  3. android操作线程各种方法解析

    (一)刚开始学习android的时候我是这么写的 new Thread( new Runnable() { public void run() { myView.invalidate(); } }). ...

  4. C#操作内存读写方法的主要实现代码

    C#操作内存读写方法是什么呢?让我们来看看具体的实例实现: using System.Runtime.InteropServices; using System.Text; publicclass F ...

  5. VBS操作Excel常见方法

    VBS操作Excel常见方法 作者: 字体:[增加 减小] 类型:转载 时间:2009-11-13我要评论 VBS控制Excel常见方法,需要的朋友可以参考下. dim oExcel,oWb,oShe ...

  6. php操作oracle的方法类集全

    在网上开始找php中操作oracle的方法类~ 果然找到一个用php+oracle制作email表以及插入查询的教程,赶忙点开来看,从头到尾仔细的看了一遍,还没开始操作,便觉得收获很大了.地址在此:h ...

  7. 封装JDBC操作数据库的方法

    自己动手封装java操作数据库的方法: 一:目录结构 二:所需依赖的第三方jar包 这里只需引入mysql-connector-java-5.1.8-bin.jar,mysql数据库驱动jar包 三: ...

  8. delphi操作文本文件的方法简介

    delphi操作文本文件的方法简介减小字体 增大字体 作者佚名来源不详发布时间2008-5-31 10:31:16发布人xuedelphi1 文件类型和标准过程       Delphi同Object ...

  9. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

随机推荐

  1. SpringMVC—对Ajax的处理（含 JSON 类型）(3)

    五.服务器端的 SpringMVC 如何返回 JSON 类型的字符串. 请求: $("#testJson8").click(function () {    $.ajax({   ...

  2. Celery-4.1 用户指南: Workers Guide (Workers 指南)

    启动工作单元 你可以通过执行以下命令在前台启动工作单元: $ celery -A proj worker -l info 查看启动工作单元的可用命令行选项,可以执行: $ celery worker ...

  3. C Primer Plus学习笔记（七）- 字符输入/输出和输入验证

    单字符 I/O:getchar() 和 putchar() getchar() 和 putchar() 每次只处理一个字符 getchar() 和 putchar() 都不是真正的函数,它们被定义为供 ...

  4. [vijos1246]文科生的悲哀(二) 动态规划

    背景 化学不及格的Matrix67无奈选择了文科.他必须硬着头皮艰难地进行着文科的学习. 描述 这学期的政治.历史和地理课本各有n章.每一科的教学必须按章节从前往后依次进行.若干章政治.若干章历史和若 ...

  5. jackson 进行json与java对象转换 之二

    主要用于测试学习用jackson包实现json.对象.Map之间的转换. 1.准备测试用的Java类 (1)Link类 package test; /** * Description: 联系方式,被u ...

  6. 用java代码解决10元喝多少瓶汽水的问题

    问题:汽水2元一瓶,四个盖子换一瓶,两个空瓶一瓶,问10元可以喝几瓶?(不许借别人空瓶或瓶盖,但可以先喝汽水再付空酒瓶或瓶盖) 最近同事让笔者看了一道脑筋急转弯的数学题,当然不是很难,只要会加减法应该 ...

  7. ORACLE体系结构一 (实例(instance))--ORACLE_SID

    数据库实例(也称为服务器Server)就是用来访问一个数据库文件集的一个存储结构及后台进程的集合.它使一个单独的数据库可以被多个实例访问(也就是ORACLE并行服务器-- OPS).实例在操作系统中用 ...

  8. sqlplus--spool基础运用

    set heading offset feedback offset echo offset newp noneset termout offspool /home/orarun/scripts/da ...

  9. nginx 启动、重启、关闭命令

    一.启动 cd /usr/local/nginx/sbin ./nginx 二.重启 更改配置重启nginx kill -HUP 主进程号或进程号文件路径    或者cd /usr/local/ngi ...

  10. Angular07 利用angular打造管理系统页面

    1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目: ...