होवर

पर एक gif को एनिमेट करना मैंने इसके लिए जवाब देखा है और मुझे यह पता चला है, लेकिन मुझे नहीं पता कि इसका उपयोग कैसे किया जाए।होवर

Stop a gif animation onload, on mouseover start the activation

उस प्रश्न का Guffa का जवाब वास्तव में मैं क्या चाहते है, लेकिन मैं कैसे कि कोड का उपयोग करने के पता नहीं है।

मेरे पास jquery प्लगइन है, लेकिन मैं कोड कहां डाल सकता हूं (प्लगइन नहीं; कोड जो गुफा के उत्तर में था)? मैं छवियों के संदर्भ में इसका उपयोग कैसे करूं? क्या काम करने के लिए मुझे कोई फ़ंक्शन कॉल करना है? यदि हां, तो इसे कॉल करने का सबसे अच्छा तरीका क्या होगा?

एक प्रश्न पूछने के लिए खेद है जिसका पहले से ही उत्तर दिया गया है, लेकिन उसका उत्तर पर्याप्त विशिष्ट नहीं था और मैं उसे अधिक विशिष्ट उत्तर के लिए पूछने के लिए टिप्पणी नहीं कर सका।

स्रोत

2011-09-19 Mark Kramer

में मदद करता है यहाँ आप क्या जरूरत के लिए एक काम उदाहरण है - 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>

स्रोत

2011-09-19 15:26:52 Amit

ठीक है, बहुत बहुत धन्यवाद। हालांकि, अगर मैं आप थे, तो मैं सिर्फ jquery स्क्रिप्ट टैग के अंदर रखूंगा। लेकिन धन्यवाद, मैं इसे उत्तर के रूप में स्वीकार करूंगा। ओह, और जिस साइट से आपने लिंक किया है वह बहुत उपयोगी है, मुझे विश्वास नहीं है कि मैंने अभी तक यह नहीं देखा है। –

सुनिश्चित करें कि आप एनिमेटेड gif प्रीलोड करें, अन्यथा वे रोलओवर पर देरी हो सकते हैं। या बेहतर अभी भी, एनिमेटेड gif के ऊपर स्थिर gif के साथ एक gif बनाएं, gif को किसी तत्व की पृष्ठभूमि छवि के रूप में सेट करें, और रोलओवर (उर्फ सीएसएस स्प्राइट रोलओवर) पर पृष्ठभूमि स्थिति बदल दें। – Tim

मेरे पास नहीं लिंक, यह इस (jQuery) की तरह हॉवर पर जावास्क्रिप्ट के साथ img src विशेषता टैग बदलने के लिए

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

कोई प्लग इन आवश्यक है करने के लिए हालांकि सबसे आसान तरीका पढ़ा आप ... होवर बाइंड से पहले $('<img />',{ src: 'path_to_animated.gif'}); जोड़कर एनिमेटेड gif को प्रीलोड करना चाह सकता है।

आशा है कि

स्रोत

2011-09-19 15:23:33 ianbarker

यह करता है, लेकिन है कि गुफा की समस्या का एक बहुत ही समान जवाब यह है कि मुझे नहीं पता कि उस कोड के साथ क्या करना है। क्या यह एक समारोह है जिसे मुझे कॉल करने की ज़रूरत है? मैं इसे कहां रखूं? मुझे दिखाएं कि यह एक HTML दस्तावेज़ –

@ मार्क क्रैमर के अंदर कैसे काम करेगा, जिससे आप समझ नहीं पाएंगे? – ianbarker

इस प्रयास करें यदि आप कैनवास का उपयोग करने के लिए ठीक हैं:

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

स्रोत

2017-04-27 05:07:13 sunny

उत्तर

संबंधित मुद्दे