Как увеличить изображение и отцентрировать его? - PullRequest
Новая
       11

Как увеличить изображение и отцентрировать его?

10 голосов
/ 08 января 2010

Есть идеи, как увеличить изображение в определенной точке, используя javascript, css? Я использую браузер на основе webkit.

Я могу увеличить, указав свойство увеличения, например, `elem.style.zoom =" 150% ", Основная проблема в том, что я не могу центрировать изображение там, где я хочу увеличить. Я могу получить точку, где я хочу увеличить, используя щелчок мышью .

Ответы [ 3 ]

17 голосов
/ 08 января 2010

Как я уже сказал в своем комментарии выше, я бы избегал использования свойства zoom css и придерживался только javascript. Мне удалось собрать следующий код, который довольно хорошо работает для первого клика, на самом деле все, что ему нужно, - это немного динамичнее (даже словом?). 

        <html>
              <head>
                <script type="text/javascript">
            	  function resizeImg (img)
            	  {
            		var resize = 150; // resize amount in percentage
            		var origH  = 200;  // original image height
            		var origW  = 200; // original image width
            		var mouseX = event.x;
            		var mouseY = event.y;
            		var newH   = origH * (resize / 100) + "px";
            		var newW   = origW * (resize / 100) + "px";
            	
                	// 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:200px;
                    height:200px;
            	    overflow:hidden;
            	  }
            	</style>
              </head>
              <body>
                <div id="Container">
                  <img alt="Click to zoom" onclick="resizeImg(this)" 
                    src="https://picsum.photos/200" />
                </div>
              </body>
            </html>

Работает в Google Chrome и IE, не уверен насчет других. Как я уже сказал, надеюсь, это укажет вам правильное направление.

3 голосов
/ 09 января 2010

Что нужно сделать.

  1. Получить местоположение клика внутри изображения. Это может показаться простым, но это не потому, что pageX и pageY события содержат координаты относительно документа. Чтобы вычислить, где внутри изображения кто-то щелкнул, вам нужно знать положение изображения в документе. Но чтобы сделать это, вам нужно учесть всех его родителей, а также, если они относительно / абсолютно / статически расположены ... это становится грязным ..
  2. рассчитать новый центр (масштаб клика - верхняя / левая позиция контейнера)
  3. масштабируйте изображение и прокрутите контейнер до нового центра

если вы не возражаете против использования 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>

и HTML необходим 

<div id="Container">
   <img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>
1 голос
/ 20 декабря 2016

В следующем коде изображение усиливается в точке щелчка мыши - изображение усиливается, но точка, в которой вы щелкнули, остается под курсором мыши, а размер рамки остается тем же. Щелкните правой кнопкой мыши, чтобы вернуться к исходному соотношению дисплея. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...