Javascript 如何放大图像并使其居中？_Javascript_Css_Zooming

Javascript 如何放大图像并使其居中？

javascript css

Javascript 如何放大图像并使其居中？,javascript,css,zooming,Javascript,Css,Zooming,你知道如何使用javascript，css在特定点放大图像吗？我正在使用基于webkit的浏览器我可以通过指定缩放属性进行缩放，例如'elem.style.zoom=“150%”，主要问题是我无法将图像居中于要缩放的位置。我可以使用鼠标单击获得要缩放的点正如我在上面的评论中所说，我将避免zoom css属性，而只使用javascript。我设法拼凑了下面的代码，在第一次点击时效果很好，实际上它所需要的只是更动态一点（甚至是一个单词？）功能调整img（img） { var resiz

你知道如何使用

javascript

，

css

在特定点放大图像吗？我正在使用基于

webkit

的浏览器

我可以通过指定缩放属性进行缩放，例如'elem.style.zoom=“150%”，主要问题是我无法将图像居中于要缩放的位置。

我可以使用鼠标单击获得要缩放的点

正如我在上面的评论中所说，我将避免zoom css属性，而只使用javascript。我设法拼凑了下面的代码，在第一次点击时效果很好，实际上它所需要的只是更动态一点（甚至是一个单词？）


功能调整img（img）
{
var resize=150；//按百分比调整金额大小
var origH=200；//原始图像高度
var origW=200；//原始图像宽度
var mouseX=event.x；
var mouseY=event.y；
var newH=origH*（调整大小/100）+“px”；
var newW=origW*（调整大小/100）+“px”；
//设置新的宽度和高度
img.style.height=newH；
img.style.width=newW；
var c=img.parentNode；
//建立新的中心
c、 scrollLeft=（mouseX*（resize/100））-（newW/2）/2；
c、 scrollTop=（鼠标*（resize/100））-（newH/2）/2；
}
#容器{
位置：相对位置；
宽度：200px；
高度：200px；
溢出：隐藏；
}

必须做什么

获取图像中单击的位置。这看起来很容易，但这不是因为事件的pageX和pageY拥有文档的坐标。要计算有人在图像中单击的位置，您需要知道图像在文档中的位置。但要做到这一点，你需要考虑它的所有父项，以及它们是否处于相对/绝对/静态位置。。事情变得一团糟

计算新中心（单击缩放位置-容器的顶部/左侧位置）

缩放图像并将容器滚动到新中心

如果您不介意对其使用jQuery，那么请使用以下（已测试）


$（文件）。准备好了吗(
函数（）{
$（“#容器img”）。单击(
功能（事件）{
var标度=150/100；
var pos=$（this.offset（）；
var clickX=event.pageX-位置左侧；
var clickY=event.pageY-pos.top；
var container=$（this.parent（）.get（0）；
$（this.css）({
宽度：这个。宽度*比例，
高度：这个。高度*刻度
});
container.scrollLeft=（$（container.width（）/-2）+单击X*比例；
container.scrollTop=（$（container.height（）/-2）+点击*比例；
}
);
}
);

以及所需的html

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

在下面的代码中，图像在鼠标单击点放大-图像放大，但单击的点仍在鼠标光标下，帧的大小保持不变。右键单击可返回到原始显示比率

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


指数
div{
宽度：400px；
高度：600px；
溢出：隐藏；
}
img{
职位：相对
}
var imageOffset_x=0；
var imageOffset_y=0；
函数onZoom（）
{
var mouseInFrame_x=event.x；
var mouseinFrame_y=event.y；
var mouseInImage_x=图像偏移量_x+鼠标帧_x；
var mouseInImage_y=图像偏移量_y+鼠标帧_y；
imageOffset_x+=鼠标图像_x*0.16；
imageOffset_y+=鼠标图像_y*0.16；
var image=$（“#容器img”）；
var imageWidth=image.width（）；
var imageHeight=image.height（）；
image.css({
高度：图像高度*1.2，
宽度：图像宽度*1.2，
左：-图像偏移量x，
顶部：-图像偏移量
});
}
函数onRightClick（）{
imageOffset_x=0；
imageOffset_y=0；
$（'#容器img'）.css({
身高：600，
宽度：400，
左:0,，
排名：0
});
返回false；
}

您是想用HTML/CSS方法缩放图像，还是想从服务器重新加载适当缩放的图像？好的，zoom属性未标准化，且不兼容跨浏览器。不，我只需要css/javascript解决方案，不需要服务器端交互。图像大小是否始终固定？在将代码转换为jQuery:Plol时，您至少可以保留我的变量名。。当我编码的时候，我必须感觉到直觉。。。以后再也不记得调整它了。。。哦，好吧。。。家庭作业；）安迪！很酷，现在我完全在试验以上我的要求，谢谢你的建议。我所需要做的就是计算并改变高度、宽度和位置。嘿，安迪，如果我要缩放多次，即第一次单击150%缩放，下一次单击200%，然后单击250%，我如何计算出新的中心，使其正确滚动和中心？？！！

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