废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  </head>
  <style type="text/css">  img{  display: block;   }  </style>
  <body>
           <img src="222.jpg"/> <div> <img class="img2" src="222.jpg"/> </div>
  </body>
</html>
<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
方法一：display:none/block;失败（gif图再次显示时动画接着上次的动画）
  var i=0;
  var img=document.querySelector('.img2')
  setInterval(function () {
  i++
  if(i%2==0){
        img.style.display='none'
  }else{
        img.style.display='block'
  }
  },2000)
方案二：remove/append  DOM节点 失败，效果同方案一（gif图再次显示时动画接着上次的动画）
  var i=0;
  var htmlimg='<img class="img2" src="222.jpg"/>'
  setInterval(function () {
  i++
  if(i%2==0){
      $('.img2').remove()
  }else{
     $('#aaa').append(htmlimg)
  }
  },2000)
方案三：一张图交替替换图片地址：成功
  var i=0;
  setInterval(function () {
  i++
  if(i%2==0){
       $('.img2').attr('src','222.jpg')
  }else{
       $('.img2').attr('src','333.jpg')
  }
  },2000)
</script>
 
 
原创，转载请注明出处：http://www.cnblogs.com/chunlei36
 

前端代码控制gif图暂停与播放的坑的更多相关文章

  1. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  2. Unity实现代码控制音频播放

    前言 很久没说过Unity了,现在说一下Unity用代码控制音频播放 准备工作 1.需要播放的音频 2.给需要加声音的对象加Audio Source组件 3.新建Play脚本,并绑定需要播放声音的对象 ...

  3. 前端Web浏览器基于Flash如何实时播放监控视频画面（四）之使用videoJs‘拉流’

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 下载videoJs 对于Video.js 5.x及更低版本,Flash技术(v ...

  4. 基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)

    基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...

  5. Effective前端5：减少前端代码耦合

    什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天.由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明: ...

  6. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. Spring+SpringMVC+MyBatis整合进阶篇（四）RESTful实战(前端代码修改)

    前言 前文<RESTful API实战笔记(接口设计及Java后端实现)>中介绍了RESTful中后端开发的实现,主要是接口地址修改和返回数据的格式及规范的修改,本文则简单介绍一下,RES ...

  8. 关于Unity中Mecanim动画的动画状态代码控制与代码生成动画控制器

    对于多量的.复杂的.有规律的控制器使用代码生成 动画状态代码控制 1:每个动画状态,比如进入状态,离开状态, 等都有可能需要代码来参与和处理,比如,进入这个动画单元后做哪些事情,来开这个动画单元后做哪 ...

  9. Web前端开发最佳实践（2）：前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

随机推荐

  1. VBA：Excel使用SQL进行查询

    Sub Query() Dim Conn As Object, Rst As Object Dim strConn As String, strSQL As String Dim i As Integ ...

  2. C# 基于MySQL的数据层基类(MySQLHelper)

    这里介绍下比较简单的方式,引用MySql.Data.dll然后添加一个MySqlHelper类来对MySql数据库进行访问和操作. 1.将MySql.Data.dll引用到你的项目中 下载地址:MyS ...

  3. Java基础-Java中的堆内存和离堆内存机制

    Java基础-Java中的堆内存和离堆内存机制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  4. 写一个Windows服务

    做了两个和Windows服务有关的项目了,最开始的时候没做过,不懂,现在明白了许多.需要注意的是,如果不想登录什么的,最后在添加安装程序的那里选择那个字长的右键属性,把启动方式改为local syst ...

  5. ubuntu中mysql中文乱码及用python3.x调用

    首先声明解决方法也是网上找来的,知识自己记下来以防以后用到.   ubuntu版本是14.04使用apt-get命令安装mysql sudo apt-get install mysql-server ...

  6. [转载]Juicer – 一个Javascript模板引擎的实现和优化

    http://ued.taobao.org/blog/2012/04/juicer-%E4%B8%80%E4%B8%AAjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6 ...

  7. 第12月第2天 uiscrollview _adjustContentOffsetIfNecessary 圆角

    1. uiscrollview在调用setFrame,setBounds等方法的时候会默认调用稀有api: _adjustContentOffsetIfNecessary 这个方法会改变当前的cont ...

  8. 第9月第7天 uicollectionview

    1. /** The margins used to lay out content in the section controller. @see `-[UICollectionViewFlowLa ...

  9. 分享一个C#创建Barcode的DLL

    用于工作需要产生Barcode,随手从网上找了一个DLL(原文地址忘了) http://files.cnblogs.com/panchunting/barcode_bin.zip 使用非常简单,只需添 ...

  10. HP服务器 开启ILO

    =============================================== 2018/11/4_第1次修改                       ccb_warlock == ...