Geek Answers Handbook

Move an object in the outside using the pointer

Someone I need help, I have a task from my teacher, this is about jquery, but I found a problem, maybe you could help. An example study is given below. The point is that if I move the mouse pointer over the area of ​​the blue rectangle, then the object in the area of ​​the red rectangle goes into motion to monitor the movement of the mouse pointer in the area of ​​the blue rectangle.


enter image description here

:
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>
+5
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

More articles:


All Articles