Question

任何人，我需要帮助，我从老师那里得到了一个任务，这是关于jquery，但我遇到了麻烦，也许你可以帮忙。案例研究如下所示。点是如果我将鼠标指针移动到蓝色框区域，则红色框区域中的对象将移动以跟随鼠标指针在蓝色框区域的移动。

enter image description here

标题：
白盒子，蓝盒子和红盒子是DIV。
红框和蓝框是白框中的绝对位置 3.蓝色方框中的蓝色圆圈表示鼠标指针被移动。
4.黑色圆圈表示当鼠标指针移动到蓝色框内时移动的对象，黑色圆圈位置仍必须位于红色框内

以下是我得到的结果。

    <!DOCTYPE html>
<html>
<head>
  <style>
  div.moved { position: relative; width:620px; height:620px; top: 10px; background:blue; border:2px groove; margin: 0 auto;}
    div.tujuan { position: absolute; width:400px; height:400px; top: 0; left: 0; background:red; border:2px groove; }
        div.korban { position: absolute; width:40px; height:40px; top: 0; left: 0; background:white; border:2px groove; }
    div.sumber { position: absolute; width:200px; height:200px; bottom:0; right: 0; background:yellow; border:2px groove; cursor: pointer;}

  p { margin:0; margin-left:10px; color:red; width:220px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }
  </style>
  <script src="jquery-latest.js"></script>
</head>
<body>
  <p>
    <span>Move the mouse over yellow box.</span>
    <span>&nbsp;</span>
  </p>

    <div class="moved">
        <div class="sumber"></div>

        <div class="tujuan">
            <div class="korban"></div>
        </div>
    </div>
<script>
    $("div.sumber").mousemove(function(e){

        var moveX = e.pageX-this.offsetLeft;
        var moveY = e.pageY-this.offsetTop;
        $("span:first").text(" LEFT : " + moveX + " , TOP : " + moveY);

        var korban = $('div.korban').offset();
        var moveX2 = e.pageX - korban.left;
        var moveY2 = e.pageX - korban.top;
        $("span:last").text(" LEFT : " + moveX2 + " , TOP : " + moveY2);

        $('div.korban').css({'margin-left' : moveX , 'margin-top' : moveY })
    });
</script>

</body>
</html>

Answer 1

这是你想要的吗？我简化了你的代码

http://jsfiddle.net/P7PBx/8/

$("div.sumber").mousemove(function(e){
        var left = e.pageX - $(this).offset().left;
        var top = e.pageY - $(this).offset().top;        
        $('span:first').text(left + ' ' + top);

        top*=2; left*=2;
        if(top > 360) top = 360;
        if(left > 360) left = 360;
        $('div.korban').css({
            'top':top,
            'left':left
        });           
});

使用指针移动外部区域中的对象

1 个答案: