zoukankan      html  css  js  c++  java
  • 前端代码控制gif图暂停与播放的坑

    废话不说,先看效果.....
    方案一、方案二效果:
    方案三效果:
    <!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
     
  • 相关阅读:
    Task.Delay() 和 Thread.Sleep() 区别
    task 如何终止线程
    旧版委托线程回忆
    c# 线程的优先级
    Java——Java泛型
    Java——Java面向对象
    Java——Java连接Jira,创建、修改、删除工单信息
    软件——Jira是什么
    Java——一文读懂Spring MVC执行流程
    Java——SSM整合所需的Maven配置文件
  • 原文地址:https://www.cnblogs.com/chunlei36/p/6425622.html
Copyright © 2011-2022 走看看