废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!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. java8 使用 lamda 表达式 完成 map reduce

    java8支持了函数编程,可以让java代码更简洁和易读. 传统 for 循环方式: List<String> list = Arrays.asList("C",&qu ...

  2. OpenStack中RabbitMQ高可用性配置

    采用镜像队列的方案进行配置 1. 网络拓扑 node1:10.10.11.1 node2:10.10.11.2 2. 配置hosts node1+node2: vim /etc/hosts >1 ...

  3. Win10新增功能快捷键大全

    原文地址:http://wenwen.sogou.com/z/q703976788.htm贴靠窗口:Win + 左/右 > Win + 上/下 > 窗口可以变为 1/4 大小放置在屏幕 4 ...

  4. CSS function--（来自网易）

    /* function */ .f-cb:after,.f-cbli li:after{;overflow:hidden;content:".";} .f-cb,.f-cbli l ...

  5. 20155212 2016-2017-2 《Java程序设计》第6周学习总结

    20155212 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Chapter10 输入串流为java.io.InputStream,输出串流为java.i ...

  6. GORM 中文文档

    由于篇幅问题,本文只是快速开始部分,下面是完整地址. 中文文档地址:http://gorm.book.jasperxu.com/ 中文文档项目地址:https://github.com/jasperx ...

  7. LCA 算法（二）倍增

     介绍一种解决最近公共祖先的在线算法,倍增,它是建立在任意整数的二进制拆分之上.   代码:   //LCA:Doubly #include<cstdio> #define swap(a, ...

  8. 原生JS获取元素的位置与尺寸

    1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...

  9. Chrome插件笔记之content_scripts

    一.概论 说这个之前先看一个段子,讲的是甲方有一奇葩客户,这客户看一网站某些样式很别扭不得劲,非要让乙方修改,乍一听没毛病,但关键是这网站不是乙方家的,根本没有修改权限,怎么办,客户就是上帝,上帝的要 ...

  10. Hive笔记之Fetch Task

    在使用Hive的时候,有时候只是想取表中某个分区的前几条的记录看下数据格式,比如一个很常用的查询: select * from foo where partition_column=bar limit ...