Spostare un oggetto nell'area esterna con il puntatore

Chiunque, ho bisogno di aiuto, ho un compito dal mio insegnante, si tratta di jquery, ma ho trovato problemi, forse potresti aiutare. Il caso di studio è come mostrato di seguito. Il punto è se muovo il puntatore del mouse sull'area del riquadro blu, quindi l'oggetto nell'area del riquadro rosso viene in movimento per seguire il movimento del puntatore del mouse sull'area del riquadro blu.Spostare un oggetto nell'area esterna con il puntatore

enter image description here

Didascalia:
1. Bianco box, scatola blu e scatola rossa è il DIV.
2. La casella rossa e la casella blu sono la posizione assoluta nella White Box
3. Il cerchio blu nella casella blu rappresenta il puntatore del mouse spostato.
4. nero cerchi indicano gli oggetti che vengono a muoversi quando il puntatore del mouse viene spostato all'interno della scatola blu, cerchi neri posizione deve essere ancora all'interno della scatola rossa

Di seguito sono riportati i risultati ottenuti finora ottengo.

<!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>

fonte

2012-04-10 Fredy

Questo potrebbe aiutare http://jsfiddle.net/elclanrs/jF27b/ – elclanrs

È questo quello che vuoi? Ho semplificato il codice un po '

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 
     });   
});

fonte

2012-04-10 03:59:10

il gioco è fatto, la pelle fresca .. – Fredy

@Fredy ye ganteng –

Spostare un oggetto nell'area esterna con il puntatore

risposta

Problemi correlati