Question

任何想法如何使用javascript，css放大特定点上的图像？我使用的是基于webkit的浏览器。

我可以通过指定缩放属性进行缩放，例如`elem.style.zoom =“150％”，主要问题是我无法将图像居中放在我想要缩放的位置。我可以使用鼠标点击来获得我想要缩放的位置。

Answer 1

正如我在上面的评论中所说，我会避免使用缩放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，不确定其他人。就像我说的那样希望它会指向正确的方向。

Answer 2

必须做些什么。

获取图片内部点击的位置。这可能看起来很简单但不是因为事件的pageX和pageY保存了与文档相关的坐标。要计算某人点击图像内部的位置，您需要知道图像在文档中的位置。但要做到这一点，你需要考虑它的所有父母，以及它们是相对/绝对/静态定位..它变得混乱..
计算新中心（缩放的点击位置 - 容器的顶部/左侧位置）
缩放图像并将容器滚动到新中心

如果您不介意使用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>

Answer 3

在下面的代码中，图像在鼠标点击放大 - 图像被放大，但您点击的点仍然在鼠标光标下，并且框架的大小保持不变。右键单击可返回原始显示比例。

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

如何放大图像并居中？

3 个答案: