Mover un objeto en el área exterior con el puntero

Cualquiera, necesito ayuda, recibí una tarea de mi maestro, se trata de jquery, pero he encontrado problemas, tal vez podría ayudar. El estudio de caso es como se muestra a continuación. Puntos es si muevo el puntero del mouse en el área del cuadro azul, luego el objeto en el área del recuadro rojo se mueve para seguir el movimiento del puntero del mouse en el área del recuadro azul.Mover un objeto en el área exterior con el puntero

enter image description here

Leyenda: 1.
caja blanca, caja azul y el rojo es el cuadro de DIV.
2. El cuadro rojo y el cuadro azul es la posición absoluta en el cuadro blanco
3. El círculo azul en el cuadro azul representa que se mueve el puntero del mouse.
4. Los círculos negros indican los objetos que vienen a moverse cuando el puntero del ratón se mueve dentro de la caja azul, posición círculos negros debe aún dentro de la caja roja

Los siguientes son los resultados hasta ahora consigo.

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

Fuente

2012-04-10 Fredy

Esto podría ayudar http://jsfiddle.net/elclanrs/jF27b/ – elclanrs

¿Esto es lo que quieres? Que simplifica su código un poco

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

Fuente

2012-04-10 03:59:10

eso es todo, fresco .. – Fredy

vosotros ganteng @Fredy –

Mover un objeto en el área exterior con el puntero

Respuesta

Cuestiones relacionadas