废话不说，先看效果.....
方案一、方案二效果：
方案三效果：
<!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. java基础基础总结----- StringBuffer（重要）

    前言StringBuffer:(常用的方法) StringBuffer与StringBuilder的区别 关于安全与不安全的解释:

  2. sklearn5_preprocessing数据标准化

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录制视频) https://study.163.com/course/introduction.htm?courseId=1005269003& ...

  3. 设置 Linux 服务器中 MySQL 允许远程访问

    开启 MySQL 远程访问权限: 在linux系统上登陆mysql服务. -- root 是用户名 [root@localhost ~]# mysql -u root -p Enter passwor ...

  4. gcc初步窥探

    由于没有上过Linux编程这门课,所以Linux学得很水啊!!用来用去都是ls -al ; cd .. ;这些渣命令,尤其gcc都不知道什么东西来的,所以先学一下吧. 一.程序的编译过程 对于GUN编 ...

  5. 云计算--hdfs dfs 命令

    在hadoop安装目录下:/hadoop2/hadoop-2.7.3 1.创建目录 bin/hdfs dfs -mkdir /user bin/hdfs dfs -mkdir /user/<us ...

  6. 关于sru源码class Model的parameters

    class Model(nn.Module): def __init__(self, words, args): super(Model, self).__init__() self.args = a ...

  7. Nginx是什么，有什么优点？为什么选择Nginx做web服务器软件?（经典经典）

    1.基础知识 代理服务器:    一般是指局域网内部的机器通过代理服务器发送请求到互联网上的服务器,代理服务器一般作用在客户端.应用比如:GoAgent,FQ神器.    一个完整的代理请求过程为:客 ...

  8. 【逆向工具】IDA Python安装与使用

    1.IDA Pyhon介绍 IDA Python是IDA6.8后自带插件,可以使用Python做很多的辅助操作,非常方便的感觉. 2.IDA Python安装 从github上IDAPython项目获 ...

  9. js array数组检测方式

    typeof var arr = [1,2,3]; console.log(typeof arr);//'object' 数组的本质是一种特殊的对象,所以返回'object'.typeof运算符只能用 ...

  10. TimedSupervisorTask

    啊啊啊 UnsupportedOperationException Lists.emptyLIst() . add (String[] ) 这他妈的不行.. .2017/09/13 16:42:16. ...