Увеличение и уменьшение для динамического изображения

Это мой Увеличение и уменьшение масштаба КодУвеличение и уменьшение для динамического изображения

function ZoomIn() { 
     var ZoomInValue =  parseInt(document.getElementById("stuff").style.zoom) + 1 + '%' 
     document.getElementById("stuff").style.zoom = ZoomInValue; 
     return false; 
    } 

    function ZoomOut() { 
     var ZoomOutValue = parseInt(document.getElementById("stuff").style.zoom) - 1 + '%' 
     document.getElementById("stuff").style.zoom = ZoomOutValue; 
     return false; 
    }

Это не работает правильно я хочу, чтобы увеличивать и уменьшать это делает изображение больше, который не приятен зум может кто-нибудь помочь в получении правильного увеличения и уменьшения кода, чтобы моя проблема могла быть решена или если есть лучшая альтернатива для этого. Пожалуйста, ответьте мне как можно скорее, пожалуйста!

Заранее спасибо

HTML-

echo'<input type="button" value="Zoom In" OnClick="return ZoomIn();" />'; 
echo'<input type="button" value="Zoom out" OnClick="return ZoomOut();" />';

источник

2015-12-04 Farhan Sajid

Рассмотрите возможность публикации также связанных html и/или CSS! – wiredolphin

Это код, который я должен использовать в прошлом для получения эффекта масштабирования картинки .. Дайте мне знать, если вы можете использовать это:

  $('#container img').hover(
       function(){ 
        var $this = $(this); 
        $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'}); 
       }, 
       function(){ 
        var $this = $(this); 
        $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'}); 
       } 
      ); 
     });

источник

2015-12-04 19:55:02

Этот эффект содержит эффект зависания, который я хочу сделать, нажав на кнопку –

Я думаю, что это ссылка, что вы ищете ..

var currentZoom = 1; 
$('button').click(function() { 
    currentZoom += 0.1; 
    $('body').css({ 
     zoom: currentZoom, 
     '-moz-transform': 'scale(' + currentZoom + ')' 
    }); 
});

See it on jsfiddle...

источник

2015-12-04 20:01:48

Нет, этот вопрос не решает мою проблему, и мой образ вращается на 360, как в виртуальном туре, поэтому я хочу добавить увеличение к этому вращающемуся изображению –

Пожалуйста, дайте мне знать, если поможет приведенный ниже пример кода.

<html> 
<head> 

<!-- CSS --> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 

    <!-- JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
</head> 

<body> 

<img src="http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg" alt="Mountain View" style="height:600;width:800;"id="stuff"> 

<hr> 
<button type="button" id="ZoomIn">Zoom-In</button> 
<button type="button" id="ZoomOut">Zoom-Out</button> 
</body> 
<script> 
    var currentZoom = 1.0; 
    $(document).ready(function() { 

     //Resize on mouse over 
     $('#stuff').hover(
     function() { 
      $(this).animate({ 'zoom': 1.2 }, 400); 
     }, 
     function() { 
      $(this).animate({ 'zoom': 1 }, 400); 
     }); 

     //Zoom in on mouse click 
     $('#ZoomIn').click(
      function() { 
       $('#stuff').animate({ 'zoom': currentZoom += .1 }, 'slow'); 
      }) 
     //Zoom out on mouse click 
     $('#ZoomOut').click(
      function() { 
       $('#stuff').animate({ 'zoom': currentZoom -= .1 }, 'slow'); 
      }) 
    }); 
</script> 
</html>

источник

2015-12-04 20:28:28 user5640942

Увеличение и уменьшение для динамического изображения

ответ

Смежные вопросы