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
     
  • 相关阅读:
    2117 poj 割点练习
    hdu 2767强连通分量练习
    hdu 1301 kruskal 最小生成树
    hdu 1523 求割点和块
    hdu 1207Arbitrage 最短路劲
    hdu 1874 畅通工程续
    求最小点基 poj 1236
    Hdu 1301 prim算法 生成最小生成树
    我眼中的性能测试工程师
    Web系统的测试
  • 原文地址:https://www.cnblogs.com/chunlei36/p/6425622.html
Copyright © 2011-2022 走看看