링크에서 애니 GIF를 가져 와서 마우스를 가져 와서 재생하는 방법

먼저이 페이지에 대해 많은 감사를드립니다. 그러나이 시점에서 나는 내가 원하는 것에 맞는 대답을 찾을 수없는 질문을 가지고있다. (어쩌면 내가하는 것처럼 성취 할 수 없을 수도있다.)링크에서 애니 GIF를 가져 와서 마우스를 가져 와서 재생하는 방법

정적 인 이미지와 링크를 만들고 싶습니다. 사용자가 링크 위로 커서를 이동하면 애니메이션 GIF가 재생됩니다 (애니메이션 GIF는 반복되지 않도록 설정되어 있으므로 한 번만 재생됩니다). 사용자가 밖으로 나가면 정적 이미지로 돌아가고 사용자가 다시 들어가면 gif가 처음부터 다시 재생됩니다.

저는 CSS와 결합 된 html5를 사용하여 웹을 만듭니다 (동시에 배우기 위해 사용하고 있습니다). 과거에 C++과 비슷한 방식으로 프로그래밍했지만 웹 컨텍스트에서는 사용하지 않았습니다.

는 지금까지 내가 뭘하려 :

CSS :

.img-acu 
{ 
float: left; 
width: 450px; 
height: 264px; 
background:transparent url("acu.gif") center top no-repeat; 
} 

.img-acu:hover 
{ 
background-image: url("acusel.gif"); 
}

HTML :

이

<a href="../example.html" class="img-acu" title="ACU Project link"></a>

는 그러나 아무것도 전혀 표시되지 :(이상한 것은이 , 내가 사용이 두 개의 정적 이미지 (png 형식)가있는 동일한 예와 제대로 작동했지만 애니메이션 GIF로 인해 작동하지 않으려는 경우가 있습니다.

나는이 시도 :

CSS :

#test 
{ 
width: 450px; 
height: 264px; 
background-image: url("acu.gif"); 
background-repeat: no-repeat; 
background-position: left; 
margin-left: 75px; 
} 

#test:hover 
{ 
background-image: url("acusel.gif"); 
}

HTML :

<div id="test"></div>

그리고 그것은 완벽하게 작동, 그냥 링크가 작동하지 않을 때와 애니메이션 GIF에 도달입니다 마지막 프레임, 재설정하지 않습니다 (페이지를 다시로드하지 않는 한).

HTML5 + CSS에서 올바르게 구현할 수있는 방법이 있는지 알고 계십니까? 자바 스크립트 나 PHP를 사용해야합니까?

정말 도움이됩니다.

감사합니다.

사용 정적 이미지에 의해 달성 될 수

출처

2015-01-03 Cris

및 GIF 이미지 (이봐, 나인 개그가 어떻게 것을!)

가 기본 스크립트가 그런 뭔가를해야만 될 수있다 :

<img id="myImg" src="staticImg.png" /> 

<script> 
    $(function() { 
     $("#myImg").hover(
      function() { 
       $(this).attr("src", "animatedImg.gif"); 
      }, 
      function() { 
       $(this).attr("src", "staticImg.gif"); 
      }       
     );     
    }); 
</script>

출처

2015-01-03 06:58:26

고마워요 lor or Duan! 그게 완벽하게 작동했습니다 :) – Cris

당신은 환영합니다 :) –

이것은 매우 간단하고 유용합니다, 공유 주셔서 감사합니다! –

이 경우이 시도 캔버스를 사용해도 괜찮습니다.

<!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"> 
     Your browser does not support the HTML5 canvas tag. 
    </canvas> 

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

</body> 
</html>

출처

2017-04-27 05:10:07 sunny

링크에서 애니 GIF를 가져 와서 마우스를 가져 와서 재생하는 방법

답변

관련 문제