Javascript 在鼠标位置缩放图像而不进行变换/平移_Javascript_Html_Css

Javascript 在鼠标位置缩放图像而不进行变换/平移

javascript html css

Javascript 在鼠标位置缩放图像而不进行变换/平移,javascript,html,css,Javascript,Html,Css,我发现了一个关于在鼠标滚轮上缩放HTML图像的简单示例。不幸的是，在我的例子中，我不能使用CSS“transform/translate”和“transformOrigin”，因为图像的上/左位置保持不变，但它必须更改（例如，当图像变得足够大并到达左侧屏幕时—“left”位置必须为“0”，而不是我的示例中的“500px”）我的代码： <!doctype html> <html lang="en"> <head> <script src="htt

我发现了一个关于在鼠标滚轮上缩放HTML图像的简单示例。不幸的是，在我的例子中，我不能使用CSS“transform/translate”和“transformOrigin”，因为图像的上/左位置保持不变，但它必须更改（例如，当图像变得足够大并到达左侧屏幕时—“left”位置必须为“0”，而不是我的示例中的“500px”）

我的代码：

<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            scale = 1;  // scale of the image
            xLast = 0;  // last x location on the screen
            yLast = 0;  // last y location on the screen
            xImage = 0; // last x location on the image
            yImage = 0; // last y location on the image
            var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

            if (document.attachEvent) //if IE (and Opera depending on user setting)
                document.attachEvent("on"+mousewheelevt, zoomImg)
            else if (document.addEventListener) //WC3 browsers
                document.addEventListener(mousewheelevt, zoomImg, false)
        }

        function zoomImg(e){
            var evt = window.event || e  // equalize event object
            var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta  // check for detail first so Opera uses that instead of wheelDelta
            var imgg = document.getElementById('imgg');

            // find current location on screen 
            var xScreen = e.pageX - imgg.offsetLeft;
            var yScreen = e.pageY - imgg.offsetTop;

            // find current location on the image at the current scale
            xImage = xImage + ((xScreen - xLast) / scale);
            yImage = yImage + ((yScreen - yLast) / scale);

            // determine the new scale
            if (delta > 0)
            {
                if (scale < 5)
                    scale += 0.1;
            }
            else
            {
                if (scale > 1)
                    scale -= 0.1;
            }

            // determine the location on the screen at the new scale
            var xNew = (xScreen - xImage) / scale;
            var yNew = (yScreen - yImage) / scale;

            // save the current screen location
            xLast = xScreen;
            yLast = yScreen;

            imgg.style.transform = 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')';
            imgg.style.transformOrigin = xImage + 'px ' + yImage + 'px';
        }
    </script>
</head>
<body>
<img id="imgg" src="http://www.baytrail.org/vtour/map4/access/CyteHils/Bayview_Tr_Grn_Hills.JPG" style="position:absolute; top:300px; left:500px;">
</body>
</html>

我该怎么做？如果可能，请展示一个CSS“缩放”和“缩放”功能的示例。

你说你不能使用转换/翻译，但你正在使用它们…？我不能。正如在主要问题中所写的——我已经找到了这个例子，但我需要用“位置左/上”操作替换“变换/平移”，但不知道如何操作。这是一个开始的例子

imgg.style.transform = 'scale(' + scale + ')' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')';
imgg.style.transformOrigin = xImage + 'px ' + yImage + 'px';