Question

由于图像尺寸过大，我想让它在浏览器窗口中滚动。滚动应该以两种方式工作：a）通过滚动条和b）通过鼠标操作。后者应该像在想要的方向上拖动图像一样工作。所以我构建了一个脚本并将其附加到图像上。虽然代码看起来正确但它无法正常工作。图像有时会消失或跳到不需要的位置。您可以在

下调用脚本

http://ardent.de/JS/

并附上代码。有人知道图像跳跃或消失的原因吗？我很高兴收到答复。

    <html>
        <head>
        <meta charset="utf-8">
        </head>        
        <body>
        <img src="schloss.jpg" id="image" />

        <script>
        var div=document.getElementById('image');
        var iwidth,iheight,oldY,oldX,newX, newY;
        var mouseisdown=false;

        div.addEventListener('load', function() {
        iwidth=this.naturalWidth;
        iheight=this.naturalHeight;
        });

        function getCoordinates(elem) {
        var LeftPos = elem.offsetLeft;
        var TopPos = elem.offsetTop;
        return {X:LeftPos,Y:TopPos};
        }

        function addListeners() {
        div.addEventListener('mousedown', mouseDown, false);
        div.addEventListener('mouseup', mouseUp, false);
        window.addEventListener('mousemove', divMove, false);
        var p=getCoordinates(div);oldX = p.X;oldY = p.Y;
        }

        function mouseUp() {
        mouseisdown=false;
        }

        function mouseDown() {
        mouseisdown=true;
        }   

        function divMove(e){
        if (mouseisdown) {
        div.style.position = 'absolute';
        newY=e.clientY-oldY;
        newX=e.clientX-oldX;
        div.style.top = newY + 'px';
        div.style.left = newX + 'px';
        oldY=newY;
        oldX=newX;}
        }

        addListeners();

      </script>

    </body>
    </html>

Answer 1

这个逻辑错误：

newY=e.clientY-oldY;
newX=e.clientX-oldX;
...
oldY=newY;
oldX=newX;

假设您的oldX在开始时为0。 {h}屏幕中的e.clientX可能是1920年。

newX值可能会从0跳到1920，因为：

newX=e.clientX-oldX; // 1920 - 0
oldX=newX; // 1920
... // Next tick
newX = e.clientX - oldX; // 1920 - 1920
oldX=newX; // 0

所以基本上这就是图像从两个奇数位置跳跃的原因。

Answer 2

现在是改进的代码。全局变量的使用已经减少，只剩下两个旧的X / Y.我对定位的第一个逻辑错误已得到纠正。另一个问题是图像的拖动行为，它抑制了mouseup事件。所以我将draggable设置为false，现在它在Chrome浏览器中运行正常。另外，我必须考虑img ...和脚本的顺序......如果两个标签之间存在引用，这有时是至关重要的。现在查看docs并通过按下鼠标按钮并移动鼠标来移动图像。

x-www-form-urlencoded

使用javascript的图像移动器无法正常工作

2 个答案: