2010-11-22 3 views
4

Я новый программист, а английский - не мой родной язык, поэтому, пожалуйста, простите меня заранее за ошибки программирования и английского языка.Динамическое изменение css backgroundPosition left AND top через JQuery

Вот что я хочу сделать: у меня есть тег div, который содержит изображение и таблицу (вне этого тега div). Через jquery я пытаюсь архивировать «эффект обрезки», поэтому я делаю таблицу перетаскиваемой, а при перетаскивании копирую изображение и устанавливаю его как фон на свой стол. Теперь мне нужно будет динамически установить фоновое положение изображения в таблице, поэтому, когда перетаскивание изображения кажется неподвижным. Эффект обрезки архивируется путем изменения (понижения) непрозрачности исходного изображения. Обратите внимание, что мне не нужно создавать выделение или что-то подобное. Сначала создается таблица с заданным размером. После этого таблица перетаскивается по изображению, создавая эффект обрезки.

Вот моя проблема: когда я устанавливаю положение для фонового изображения через jquery (.css), он не меняет верхнюю позицию, а левая позиция не работает должным образом.

Давайте посмотрим яваскрипт кода:

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

Положения фона не правильно установить сейчас, но это не имеет значения, слишком много на данный момент. Я просто надеюсь, что есть способ изменить динамически верхнюю позицию, и я буду беспокоиться о математике позже. Также я надеюсь, что это достаточно ясно. С наилучшими пожеланиями,

Irene

ответ

5

Свойство background-position CSS может принимать два аргумента, разделенных пробелом:

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

попытка указать единицу измерения

+0

Я уже пробовал , не сработал ... но спасибо, в любом случае, я очень благодарен, что вы заинтересовались моим вопросом. В будущем я скажу, что я не думаю, что это синтаксическая ошибка (по крайней мере, надеюсь, нет), я уже пробовал все возможные комбинации XD. Настоящий синтаксис является единственным, который на самом деле дает некоторый результат в позиции фона, иначе он ничего не делает ... просто устанавливает фон. – Arha

+0

, вероятно, он пропускает пробел между левой и верхней позицией. Редактировать: как указал Фредерик :) – 2010-11-22 10:49:03

Смежные вопросы