किसी छवि में ज़ूम कैसे करें और इसे कैसे केन्द्रित करें?

कोई विचार javascript, css का उपयोग कर किसी विशेष बिंदु पर किसी छवि में ज़ूम करने का तरीका कैसे है? मैं webkit आधारित ब्राउज़र का उपयोग कर रहा हूं।किसी छवि में ज़ूम कैसे करें और इसे कैसे केन्द्रित करें?

मैं ज़ूम संपत्ति निर्दिष्ट करके ज़ूम कर सकता हूं, जैसे `elem.style.zoom =" 150% ", मुख्य समस्या यह है कि मैं उस छवि को केंद्रित नहीं कर सकता जहां मैं ज़ूम करना चाहता हूं। मैं उस बिंदु को प्राप्त कर सकता हूं जहां मैं माउसक्लिक का उपयोग करके ज़ूम करना चाहता हूं।

स्रोत

2010-01-08 sat

क्या आप इसे HTML/CSS विधियों के साथ ज़ूम करना चाहते हैं या आप सर्वर से उचित रूप से स्केल की गई छवि को फिर से लोड करना चाहते हैं? – Boldewyn

afaik, ज़ूम संपत्ति मानकीकृत नहीं है और यह क्रॉस ब्राउज़र संगत नहीं होगा। –

नहीं, मुझे केवल सीएसएस/जावास्क्रिप्ट समाधान कोई सर्वर साइड इंटरैक्शन नहीं चाहिए। – sat

जैसा कि मैंने उपरोक्त मेरी टिप्पणी में कहा था, मैं ज़ूम सीएसएस संपत्ति से बचूंगा और केवल जावास्क्रिप्ट पर चिपकेगा। मैं निम्नलिखित कोड को एक साथ फेंकने में कामयाब रहा जो पहले क्लिक के लिए बहुत अच्छी तरह से काम करता है, वास्तव में इसकी जरूरत सिर्फ थोड़ी अधिक गतिशीलता है (यहां तक कि एक शब्द?)।

<html> 
    <head> 
    <script type="text/javascript"> 
     function resizeImg (img) 
     { 
     var resize = 150; // resize amount in percentage 
     var origH = 61; // original image height 
     var origW = 250; // original image width 
     var mouseX = event.x; 
     var mouseY = event.y; 
     var newH = origH * (resize/100); 
     var newW = origW * (resize/100); 

     // Set the new width and height 
     img.style.height = newH; 
     img.style.width = newW; 

     var c = img.parentNode; 

     // Work out the new center 
     c.scrollLeft = (mouseX * (resize/100)) - (newW/2)/2; 
     c.scrollTop = (mouseY * (resize/100)) - (newH/2)/2; 
     } 
    </script> 
    <style type="text/css"> 
     #Container { 
     position:relative; 
     width:250px; 
     height:61px; 
     overflow:hidden; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="Container"> 
     <img alt="Click to zoom" onclick="resizeImg(this)" 
     src="http://sstatic.net/so/img/logo.png" /> 
    </div> 
    </body> 
</html>

यह Google क्रोम और आईई में काम करता है, दूसरों के बारे में निश्चित नहीं है। जैसे मैंने आशा व्यक्त की कि यह आपको सही दिशा में इंगित करेगा।

स्रोत

2010-01-08 17:38:32

एंडी! कूल, अब मैं पूरी तरह से मेरी आवश्यकता के लिए उपरोक्त प्रयोग कर रहा हूं, सुझाव के लिए धन्यवाद। मुझे बस गणना करना है और ऊंचाई, चौड़ाई, स्थिति बदलना है। – sat

कोई समस्या नहीं, शुभकामनाएँ :) –

हे एंडी, अगर मैं कई बार ज़ूम करने जा रहा हूं, जिसका अर्थ है कि 1% 150% ज़ूम क्लिक करें, अगले 200% फिर 250%, मैं नए केंद्र को कैसे काम करूं, ताकि यह स्क्रॉल और केंद्र हो अच्छी तरह। ?? !! – sat

क्या करना है।

छवि के अंदर क्लिक का स्थान प्राप्त करें। यह आसान प्रतीत हो सकता है लेकिन ऐसा इसलिए नहीं है क्योंकि ईवेंट के पेजएक्स और पेज वाई दस्तावेज़ के संबंध में निर्देशांक धारण करते हैं। किसी छवि पर क्लिक किए गए छवि के अंदर गणना करने के लिए आपको दस्तावेज़ में छवि की स्थिति जानने की आवश्यकता है। लेकिन ऐसा करने के लिए आपको इसके सभी माता-पिता में कारक बनाने की आवश्यकता है, साथ ही साथ यदि वे सापेक्ष/पूर्ण/स्थैतिक स्थान पर हैं .. यह गन्दा हो जाता है ..
नए केंद्र की गणना करें (क्लिक स्थिति स्केल - शीर्ष/कंटेनर की स्थिति)
पैमाने छवि को छोड़ दिया और नए केंद्र

को कंटेनर स्क्रॉल अगर आप jQuery का उपयोग कर कोई आपत्ति नहीं है यह उसके बाद निम्न (परीक्षण किया)

<script type="text/javascript"> 
     $(document).ready(
      function(){ 
       $('#Container img').click(
        function(event){ 
         var scale = 150/100; 
         var pos = $(this).offset(); 
         var clickX = event.pageX - pos.left; 
         var clickY = event.pageY - pos.top; 
         var container = $(this).parent().get(0); 

         $(this).css({ 
             width: this.width*scale, 
             height: this.height*scale 
            }); 

         container.scrollLeft = ($(container).width()/-2) + clickX * scale; 
         container.scrollTop = ($(container).height()/-2) + clickY * scale; 
        } 
       ); 
      } 
     ); 
</script>

का उपयोग के लिए और एचटीएमएल की आवश्यकता

<div id="Container"> 
    <img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" /> 
</div>

स्रोत

2010-01-08 21:33:29

मेरे कोड को jQuery में कनवर्ट करते समय कम से कम मेरे चर नामों को बरकरार रखा हो सकता है: पी –

लॉल .. मुझे कोडिंग करते समय मुझे सहज महसूस करना पड़ा ... और बाद में इसे समायोजित करने के लिए कभी याद नहीं किया गया ... ओह ठीक है। .. घर का पाठ ;) –

निम्नलिखित कोड में, छवि माउस क्लिक बिंदु पर बढ़ाया गया है - छवि को बढ़ाया गया है, लेकिन जिस बिंदु पर आपने क्लिक किया है वह आपके माउस कर्सर के नीचे रहता है, और फ्रेम का आकार वही रहता है। मूल प्रदर्शन अनुपात पर वापस जाने के लिए राइट-क्लिक करें।

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 

    <style> 
     div { 
      width: 400px; 
      height: 600px; 
      overflow: hidden; 
     } 
     img { 
      position: relative 
     } 
    </style> 

    <script src="http://code.jquery.com/jquery-1.7.2.js"></script> 

    <script type="text/javascript"> 
     var imageOffset_x = 0; 
     var imageOffset_y = 0; 

     function onZoom() 
     { 
      var mouseInFrame_x = event.x; 
      var mouseinFrame_y = event.y; 
      var mouseInImage_x = imageOffset_x + mouseInFrame_x; 
      var mouseInImage_y = imageOffset_y + mouseinFrame_y; 
      imageOffset_x += mouseInImage_x * 0.16; 
      imageOffset_y += mouseInImage_y * 0.16; 

      var image = $('#container img'); 
      var imageWidth = image.width(); 
      var imageHeight = image.height(); 

      image.css({ 
       height: imageHeight * 1.2, 
       width: imageWidth * 1.2, 
       left: -imageOffset_x, 
       top: -imageOffset_y 
      }); 
     } 

     function onRightClick() { 
      imageOffset_x = 0; 
      imageOffset_y = 0; 

      $('#container img').css({ 
       height: 600, 
       width: 400, 
       left: 0, 
       top: 0 
      }); 

      return false; 
     } 

    </script> 
</head> 
<body> 
    <a id="zoom" href="#" onclick="onZoom();">Zoom</a> 

    <div id="container"> 
     <img src="~/Images/Sampple.jpg" width="400" height="600" onclick="onZoom();" oncontextmenu="onRightClick(); return false;"/> 
    </div> 
</body> 
</html>

स्रोत

2016-12-20 10:53:08

किसी छवि में ज़ूम कैसे करें और इसे कैसे केन्द्रित करें?

उत्तर

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