jquery का उपयोग कर div सामग्री को ज़ूम कैसे करें?

Question

मेरे पास माता-पिता <div> है। अंदर मैं कुछ पाठ और छवियों को रखता हूं। अब मुझे उस पैरेंट <div> के किसी विशेष भाग पर ज़ूम करने की आवश्यकता है। क्या यह संभव है?

Answer 1

यदि आप चाहते हैं कि छवि माउस हॉवर पर जूम करने के लिए किया जा:

$(document).ready(function() { 
$('#div img').hover(
    function() { 
     $(this).animate({ 'zoom': 1.2 }, 400); 
    }, 
    function() { 
     $(this).animate({ 'zoom': 1 }, 400); 
    }); 
}); 

या आप इस तरह से कर सकते हैं, तो अंदर और बाहर बटन ज़ूम उपयोग किया जाता है:

$("#ZoomIn").click(ZoomIn()); 

$("#ZoomOut").click(ZoomOut()); 

function ZoomIn (event) { 

    $("#div img").width(
     $("#div img").width() * 1.2 
    ); 

    $("#div img").height(
     $("#div img").height() * 1.2 
    ); 
}, 

function ZoomOut (event) { 

    $("#div img").width(
     $("#imgDtls").width() * 0.5 
    ); 

    $("#div img").height(
     $("#div img").height() * 0.5 
    ); 
} 

Answer 2

$('image').animate({ 'zoom': 1}, 400); 

Answer 3

@ गादडे - आपका जवाब बहुत उपयोगी था। धन्यवाद! मुझे एक div के लिए "मैप्स" की तरह ज़ूम की आवश्यकता थी और मुझे आपकी पोस्ट के साथ आवश्यक महसूस करने में सक्षम था। मेरे मानदंडों में क्लिक दोहराने की आवश्यकता शामिल थी और प्रत्येक क्लिक के साथ ज़ूम आउट/इन करना जारी रखा गया था। नीचे मेरा अंतिम परिणाम है।

var currentZoom = 1.0; 

    $(document).ready(function() { 
     $('#btn_ZoomIn').click(
      function() { 
       $('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow'); 
      }) 
     $('#btn_ZoomOut').click(
      function() { 
       $('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow'); 
      }) 
     $('#btn_ZoomReset').click(
      function() { 
       currentZoom = 1.0 
       $('#divName').animate({ 'zoom': 1 }, 'slow'); 
      }) 
    }); 

Answer 4

प्रयुक्त ज़ूम-मास्टर/jquery.zoom.js। छवि के लिए ज़ूम पूरी तरह से काम किया। यहां पृष्ठ का एक लिंक है। http://www.jacklmoore.com/zoom/

<script> 
    $(document).ready(function(){ 
     $('#ex1').zoom(); 

    }); 
</script>