Vurguluda bir gif animasyonu

Bunun için cevabı aradım ve buldum ama nasıl kullanacağımı bilmiyorum. Bu sorununVurguluda bir gif animasyonu

Stop a gif animation onload, on mouseover start the activation

Guffa cevabı tam olarak ne istiyorum, ama bu kodu nasıl kullanılacağını bilmiyorum.

JQuery eklentisi var, ancak kodu nereye koyarım (eklentinin değil, Guffa'nın cevabındaki kod)? Görüntüleri referans olarak nasıl kullanırım? Çalışması için çağırmam gereken bir işlev var mı? Eğer öyleyse, bunu çağırmanın en iyi yolu ne olurdu?

Daha önce cevaplanmış bir soru sorduğum için üzgünüm, ama cevabı yeterince spesifik değildi ve daha spesifik bir cevap için ona sormak için yorum yapamadım.

kaynak

2011-09-19 Mark Kramer

yardımcı

Umut çalışan gerekenler için örnek - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" /> 

<script> 
    $(function() { 
     $("#imgDino").hover(
      function() { 
       $(this).attr("src", "animated.gif"); 
      }, 
      function() { 
       $(this).attr("src", "static.gif"); 
      }       
     );     
    }); 
</script>

kaynak

2011-09-19 15:26:52 Amit

Tamam, çok teşekkür ederim. Ancak, senin yerinde olsaydım, jquery'yi komut dosyası etiketlerine koyardım. Ama teşekkürler, bunu cevap olarak kabul edeceğim. Oh, ve bağlandığınız site çok yararlı, henüz görmediğime inanamıyorum. –

Animasyonlu gif'i önceden yüklediğinizden emin olun, aksi halde rollover'da gecikme olabilir. Ya da daha da iyisi, gif animasyonlu gifin üzerindeki gif ile bir gif yap, gif'i bir elemanın arka plan görüntüsü olarak ayarla ve rollover'daki arka plan konumunu değiştir (sadece CSS sprite rollover'ları). – Tim

bende olmayan bağlantıyı, bu

$(function() { 
    $('a').hover(function() { 
     $(this).attr('src','path_to_animated.gif'); 
    },function() { 
     $(this).attr('src','path_to_still.gif'); 
    } 
});

yok eklentileri gerekli bu (jQuery) gibi vurgulu üzerinde javascript ile img etiketleri src özelliğini değiştirmek yapmanın ancak en kolay yolu okumak ... size hover bağından önce $('<img />',{ src: 'path_to_animated.gif'}); ekleyerek animasyonlu gif'i önceden yüklemek isteyebilir. İşte

kaynak

2011-09-19 15:23:33 ianbarker

Öyle ama işte Guffa'nın problemine çok benzer bir cevap, bu kodla ne yapacağımı bilmem. Aramam gereken bir işlev mi? Onu nereye koyayım? Bana bir HTML belgesinin içinde nasıl çalışacağını göster –

@Mark Kramer, hangi bitleri anlamıyorsun? – ianbarker

Eğer tuval kullanmak için OK ise bu deneyin:

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
      .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;} 
      .canvas {position:absolute;z-index:1;} 
      .gif {position:absolute;z-index:0;} 
      .hide {display:none;} 
     </style> 

     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

     <script> 
      window.onload = function() { 
       var c = document.getElementById("canvas"); 
       var ctx = c.getContext("2d"); 
       var img = document.getElementById("gif"); 
       ctx.drawImage(img, 0, 0); 
      } 

      $(document).ready(function() { 
       $("#wrapper").bind("mouseenter mouseleave", function(e) { 
        $("#canvas").toggleClass("hide"); 
       }); 
      }); 
     </script> 

    </head> 
    <body> 

    <div> 
     <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif"> 

     <canvas id="canvas" class="canvas" width="400px" height="328px"> 
     </canvas> 

     <div id="wrapper" class="wrapper"></div> 
    </div> 

    </body> 
    </html>

kaynak

2017-04-27 05:07:13 sunny

Vurguluda bir gif animasyonu

cevap

İlgili konular