Dynamisch ändern css backgroundPosition links und oben über Jquery

Question

Ich bin ein neuer Programmierer und Englisch ist nicht meine Muttersprache, also bitte verzeihen Sie mir im Voraus für beide Programmierung und Englisch Fehler.

Hier ist, was ich tun möchte: Ich habe ein Div-Tag, das ein Bild und eine Tabelle (außerhalb dieses Div-Tags) enthält. Über jquery versuche ich, einen 'Cropping-Effekt' zu erzielen, so dass ich meinen Tisch ziehbar machen kann und während des Ziehens kopiere ich das Bild und setze es als Hintergrund auf meinem Tisch. Jetzt müsste ich in der Lage sein, dynamisch die Hintergrundposition des Bildes in der Tabelle einzustellen, so dass beim Ziehen das Bild still zu sein scheint. Der Beschneidungseffekt wird archiviert, indem die Opazität des Originalbilds geändert (verringert) wird. Beachten Sie, dass ich keine Sellection oder ähnliches erstellen muss. Die Tabelle wird zuerst mit einer bestimmten Größe erstellt. Danach wird die Tabelle über das Bild gezogen und der Beschneidungseffekt erstellt.

Hier ist mein Problem: Wenn ich die Position für das Hintergrundbild über Jquery (. Css) festlegen, ändert es nicht die obere Position und die linke Position funktioniert nicht wie erwartet.

Lassen Sie sich den Javascript-Code sehen:

<script type="text/javascript"> 

$(function() { 
    $("#myTable").draggable({ 
     drag:function() { 
      //$("#myTable").css("opacity", "0.6"); 
      var $img = $("img").clone(); 
      var $src = $img.attr('src'); 
      $("#myTable").css("background-image", 'url(' + $src + ')'); 
      $position = $("#myTable").position(); 

      $("#myTable").css({ 
       backgroundPosition: -parseInt($position.left) + -parseInt($position.top)}); 
     }, 
     stop:function() { 
      //$("#myTable").css("opacity", "1.0"); 
      $("#div1").css("opacity", "0.6"); 
     } 
    }); 
}); 

</script> 

Die Position des Hintergrunds jetzt nicht richtig eingestellt ist, aber es spielt keine Rolle, zu viel im Moment. Ich hoffe nur, dass es einen Weg gibt, die Spitzenposition auch dynamisch zu ändern, und ich werde mich später um die Mathematik sorgen. Ich hoffe auch, es ist klar genug. Mit freundlichen Grüßen,

Irene

Answer 1

Die background-position CSS-Eigenschaft zwei Argumente nehmen, durch ein Leerzeichen getrennt:

$("#myTable").css("backgroundPosition", (-parseInt($position.left)).toString() 
    + "px " + (-parseInt($position.top)).toString() + "px"); 

Answer 2

backgroundPosition: -parseInt($position.left)+'px ' + -parseInt($position.top) + 'px'}); 

versuchen, eine Maßeinheit angeben