Hoạt hình gif khi di chuột

Tôi đã tìm câu trả lời cho điều này và tôi đã tìm thấy nó, nhưng tôi không biết cách sử dụng nó.Hoạt hình gif khi di chuột

Stop a gif animation onload, on mouseover start the activation

Guffa của câu trả lời cho câu hỏi đó là chính xác những gì tôi muốn, nhưng tôi không biết làm thế nào để sử dụng mã đó.

Tôi có plugin jquery, nhưng tôi nên đặt mã ở đâu (không phải plugin, mã trong câu trả lời của Guffa)? Làm thế nào để sử dụng nó trong tham chiếu đến hình ảnh? Có chức năng nào tôi phải gọi để làm cho nó hoạt động không? Nếu vậy, cách tốt nhất để gọi nó là gì?

Xin lỗi vì đã đặt câu hỏi đã được trả lời, nhưng câu trả lời của anh ấy không đủ cụ thể và tôi không thể nhận xét để hỏi anh ấy câu trả lời cụ thể hơn.

Nguồn

2011-09-19 Mark Kramer

Dưới đây là một ví dụ làm việc cho những gì bạn cần - 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>

Nguồn

2011-09-19 15:26:52 Amit

Được rồi, cảm ơn bạn rất nhiều. Tuy nhiên, nếu tôi là bạn, tôi chỉ cần đặt các jquery bên trong thẻ script. Nhưng cảm ơn, tôi sẽ chấp nhận điều này như là câu trả lời. Ồ, và trang web bạn liên kết là rất hữu ích, tôi không thể tin rằng tôi chưa thấy điều đó. –

Đảm bảo bạn tải trước ảnh động gif, nếu không chúng có thể bị trì hoãn khi di chuột qua. Hoặc vẫn tốt hơn, tạo một gif với gif tĩnh trên gif động, đặt gif làm hình nền của một phần tử, và chỉ cần thay đổi định vị nền trên rollover (còn gọi là CSS sprite rollovers). – Tim

tôi đã không đọc các liên kết, tuy nhiên cách dễ nhất để làm điều này là để thay đổi thuộc tính thẻ img src với javascript trên di chuột như thế này (jQuery)

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

Không có plugin cần thiết ... bạn có thể muốn tải trước gif động bằng cách thêm $('<img />',{ src: 'path_to_animated.gif'}); trước khi gắn kết di chuột.

Hy vọng rằng sẽ giúp

Nguồn

2011-09-19 15:23:33 ianbarker

Nó không, nhưng đó là một câu trả lời rất giống với guffa của vấn đề là tôi không biết phải làm gì với mã đó. Đó là một chức năng tôi cần phải gọi? Tôi đặt nó ở đâu? Chỉ cho tôi cách nó hoạt động bên trong một tài liệu HTML –

@Mark Kramer để bạn không hiểu được những bit nào? – ianbarker

Hãy thử điều này nếu bạn là OK để sử dụng vải:

<!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>

Nguồn

2017-04-27 05:07:13 sunny

Hoạt hình gif khi di chuột

Trả lời

Các vấn đề liên quan