5

任何人，我需要帮助，我从老师那里得到了一个任务，它是关于 jquery 的，但是我发现了问题，也许你可以帮忙。案例研究如下图所示。点是如果我在蓝框区域上移动鼠标指针，那么红框区域中的对象会跟随鼠标指针在蓝框区域上的移动而移动。


在此处输入图像描述

Caption:
1. 白框、蓝框、红框为DIV。
2、红框和蓝框是白框内的绝对位置。
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>
4

1 回答 1

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
        });           
});​
于 2012-04-10T03:59:10.107 回答