2014-02-19 1 views
1
I 일시 중지와 나인 개그처럼 지프를 재생하려면 http://www.9gag.com

9 gag와 같은 gif를 어떻게 재생할 수 있습니까?

,

내가 어떻게 할 수 있습니까?

나는 하나를 사용해야한다는 것을 알고있다. Jpg 및. 지프하지만 난

누군가가 나에게 예를 들어 줄 수있는 몇 가지를 시도하지만이 기능

function is_gif_image(i) { 
     return /^(?!data:).*\.gif/i.test(i.src); 
    } 

    function freeze_gif(i) { 
     var c = document.createElement('canvas'); 
     var w = c.width = i.width; 
     var h = c.height = i.height; 
     c.getContext('2d').drawImage(i, 0, 0, w, h); 
     try { 
      i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects 
     } catch(e) { // cross-domain -- mimic original with all its tag attributes 
      for (var j = 0, a; a = i.attributes[j]; j++) 
       c.setAttribute(a.name, a.value); 
      i.parentNode.replaceChild(c, i); 
     } 
    } 

    function unfreeze_gif(id, src) { 
    i = document.getElementById(id); 
     i.src = src; 
    } 

을 발견

작동하지 않았다하지만 난 HTML에 사용하는 방법을 몰라? HTML, CSS E JS (또는 Jquery)?

감사

+2

맹목적으로 복사하여 붙여 넣는 기술을 실제로 배우려면 시간을 들여주세요. 또한, 9gag, eugh – Bojangles

답변

4

그것은 이미지의 단지 2 버전입니다 : 하나의 정적 JPG, 하나의 움직이는 GIF.

다음은 행동을 모방 바이올린입니다 : http://jsfiddle.net/bortao/QADeM/

JS

$(".gif-post").on("click", function() { 
    var $this = $(this); 
    var img = $this.find("img"); // Find the image element 
    if (!this.playing) { 
     this.playing = true; // Set or create a variable 
     img.attr("src", img.attr("src").replace(".jpg", "a.gif")); 
     $this.find(".play").hide(); // Hide the overlay 
    } else { 
     this.playing = false; 
     img.attr("src", img.attr("src").replace("a.gif", ".jpg")); 
     $this.find(".play").show(); 
    } 
}); 
1

실제로 자신을 복제하려면 나인 개그 작업을했습니다, 그래서 GIF 플레이어뿐만 아니라 검색되었습니다. 이 일을 위해 할 일은 다음 클래스 자바 스크립트를 포함하고 .gif 참고 링크 및 추가입니다 http://freezeframe.chrisantonellis.com/

: "freezeframe을"

또한이있다

당신이 하나를 사용할 수 있습니다 하나 : http://quickleft.com/blog/embeddable-animated-gifs-with-controls-just-in-time-for-christmas

나는 이것을 사용하지 않았지만 매우 흥미로 보입니다.

관련 문제