废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!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. Excel：公式中的这些特殊数字

    19E+307 9E+307是科学计数法表示的一个数字,就简单理解成是Excel支持的一个很大的数字就可以了. 用法示例: =LOOKUP(9E+307,A:A) 根据LOOKUP函数的性质,提取A列 ...

  2. 鸟哥的Linux私房菜——第十九章：例行命令的建立

    视频链接:http://www.bilibili.com/video/av11008859/ 1. 什么是例行性命令 (分为两种,一种是周期性的,一种是突发性的)1.1 Linux 工作排程的种类: ...

  3. Shell中的case命令

    case语句和判断语句[if...elif...else]功能类似;当在逻辑判断比较简单的情况下,比后者的代码量要少许多.case用法,用变量来匹配某值,如果匹配成功则执行它下面的命令,直到 ::为止 ...

  4. Linux通过ssh登录其他服务器，不用输入密码

    有A(192.168.10.163)和B(192.168.10.164)两台服务器,为了使A服务器通过SSH连接B服务器时,免密登录,做以下操作. 1. 登录A(192.168.10.163)服务器( ...

  5. Nginx配置项优化（转载）

    (1)nginx运行工作进程个数,一般设置cpu的核心或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件 grep ^processor / ...

  6. html5 canvas arcTo()

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. javascript数组赋值操作

    最近在司徒正美的<javascript框架设计>,在里面发现了一个段代码 ...... var _len = arr1.length; while (_len) { arr2[--_len ...

  8. shiro登录成功之后跳转原路径

    通过 WebUtils.getSavedRequest(request) 来获取shiro保存在session登录之前的url 1:java Controller代码 @PostMapping(&qu ...

  9. 第9月第15天 设计模式 adapter mvc

    1. 有一道iOS面试题,iOS中都有什么设计模式?很少有答案说包括adapter. gof 书中adapter模式有以下内容: 实现: ... b ) 使 用 代 理 对 象 在这种方法中, T r ...

  10. C. Ayoub and Lost Array（DP）

    (又是被队友带着上分的一场--) 题目链接:http://codeforces.com/contest/1105/problem/C 题目大意:给你n,l,r.每一个数都是在l,r范围之内,然后问你这 ...