时间戳

首页 > 解决方案 > 如何在 JavaScript 中移动前面的图像而不影响后面的图像？

javascript - 如何在 JavaScript 中移动前面的图像而不影响后面的图像？

问题描述

function generate() {
    var c1 = document.getElementById('shadeDiv');
    c1.addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
    
    function mouseUp() {
        window.removeEventListener('mousemove', move, true);
        c1.style.top = "8px";
        c1.style.left = "565px";
    }
    
    function mouseDown(e) {
        window.addEventListener('mousemove', move, true);
    }
    
    function move(e) {
        c1.style.top = e.clientY + 'px';
        c1.style.left = e.clientX + 'px';
    }
    }
 body {
        height: 100%;
        background-color: #ffffcc;
        text-align: center;
    }
    
    #shadeDiv {
        border:1px solid;
        position:absolute;
        left: 565px;
        top: 8px;
        width: 145px;
        height: 227px; 
    }
    
    #shade {
        width: 145px;
        height: 227px; 
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Masking</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body onload="generate()">
    
        <div id="divImage">
            <img src="dotcard0.png" id="shade">
        </div>
    
        <div id="shadeDiv">
            <img src="shade.png" id="shade">
        </div>
    
    </body>
    </html>

你好，这些是代码。如果我选择“阴影”图像以同时向后移动图像将选择并弹出。但是我想如果我选择“阴影”图像来移动它只会选择“阴影”图像，我只需要垂直移动。但是现在我只能在页面中的任何位置移动，但我只想垂直移动。所以，总结是我只想选择“阴影”图像而不影响“dotcard0”图像，我只需要垂直移动“阴影”图像。请帮我。

谢谢和问候， 扎吉特

标签： javascripthtmlcss

解决方案

你可以改变你的代码是这样的

function generate() {
  var c1 = document.getElementById('shadeDiv');
  c1.addEventListener('mousedown', mouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
  var origY = null;

  function mouseUp() {
    window.removeEventListener('mousemove', move, true);
    origY = e.clientY;
  }

  function mouseDown(e) {
    window.addEventListener('mousemove', move, true);
  }

  function move(e) {
    c1.style.top = (origY + e.clientY) + "px";
  }
}

推荐阅读