废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!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. Ansible Role

    Ansible Role 专题总揽 https://www.jianshu.com/p/1be92c3f65ec lework 关注 2017.03.02 12:57* 字数 629 阅读 1439评 ...

  2. Vue单页面应用阻止浏览器记住密码

    Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎 摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...

  3. jquery的json对象与字符串之间转换

    json对象----- >>字符串 JSON.stringify(obj) json字符串------>>json对象 JSON.parse(string) 公众号 欢迎关注我 ...

  4. OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型

    OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型 目录 背景介绍 请参考前文OpenGL ES 2.0 Shader 调试新思路(一): 改变提问方式 优化 ledCha ...

  5. linq.js - LINQ for JavaScript

    var jsonArray = [ { "user": { "id": 100, "screen_name": "d_linq&q ...

  6. vue需要注意的事宜

    1.Vue在进行点击事件的时候大部分是在标签上进行添加的,一般在标签上添加@click: 如果需要在组件上面进行点击事件的时候,直接写@click是木有变化的,需要在后面添加一个.native就如@c ...

  7. 洛谷 P5089: CodeForces #500 (Div. 1) B / 1012B : Chemical table

    题目传送门:洛谷P5089. 题意简述: 一张 \(n \times m\) 的表格,有一些格子有标记,另外一些格子没有标记. 如果 \((r_1,c_1),(r_1,c_2),(r_2,c_1)\) ...

  8. linux下查看各硬件型号

    查看主板型号 # dmidecode |grep -A 8 "System Information"System Information 上网查DELL CS24-TY,找到说主板 ...

  9. ASP.NET MVC + MySQL で開発環境構築

    from:http://qiita.com/midori44/items/ef7cdd1d37c353e44b5f ASP.NET MVC & EntityFramework によるコードファ ...

  10. 【坐在马桶上看算法】算法6：只有五行的Floyd最短路算法

            暑假,小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间则没有,如下图.为了节省经费以及方便计划旅程,小哼希望在出发之前知道任意两个城市之前的最短路程.         上图中有 ...