5

誰でも、助けが必要です、先生から仕事をもらいました、それはjqueryに関するものですが、問題が見つかりました。おそらくあなたが助けてくれるでしょう. ケーススタディは以下のとおりです。ポイントは、青いボックス領域にマウス ポインターを移動すると、赤いボックス領域のオブジェクトが、青いボックス領域のマウス ポインターの動きに追従して移動することです。


ここに画像の説明を入力

キャプション:
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 に答える