zoukankan      html  css  js  c++  java
  • 想控制GIF图片动画播放吗?试试gifffer.js

    在线演示:http://www.gbtags.com/gb/demoviewer/3578/c6bec39a-61ae-4017-8e23-e0bc1eeb740f/example|index.html.htm

    大家可能都斯通见惯了互联网上普遍使用的GIF图片,但是有没有想过让用户自己尝试控制GIF动画的播放呢?在今天这篇文章中,我们将介绍一个超棒的Javascript小类库 - gifffer.js,它可以帮助你添加控制GIF动画功能,想不想尝试一下?

    如何使用?

    首先引用JS,如下:

    1. <scripttype="text/javascript"src="gifffer.min.js"></script>

    在HTML中使用如下代码来引用GIF图片:

    1. <imgdata-gifffer="gbtags.gif"/>

    注意替换src属性为data-gifffer来实现控制

    最后一步,添加处理的javascript,如下:

    1. window.onload =function(){
    2. Gifffer();
    3. }

    搞定了,是不是非常简单。

    实现原理

    其实大家研究一下代码,会发现,这个实现的方式,是把图片用DIV替换并且添加一个运行按钮,并且使用HTML画布来生成一个背景视屏截图

    兼容性:Chrome, FF, Safari, Opera, IE9+
    阅读原文:想控制GIF图片动画播放吗?试试gifffer.js

  • 相关阅读:
    ACM Red and Black
    ACM Wooden Stricks
    ACM Strange fuction
    ACM pie
    ACM Doing Homework again
    ACM FatMouse' Trade
    ACM 今年暑假不AC
    ACM Ignatius and the Princess II
    一、数组---第三大的数
    一、数组---移动零※※※※※※
  • 原文地址:https://www.cnblogs.com/gbin1/p/3866370.html
Copyright © 2011-2022 走看看