Jquery - переключение изображения в зависимости от того, как пользователь перетаскивает его - PullRequest
Новая
       14

Jquery - переключение изображения в зависимости от того, как пользователь перетаскивает его

1 голос
/ 30 марта 2012

Я использую JQuery и хотел бы сделать следующее.У меня есть 2 изображения автомобиля.Тот, который смотрит влево, а другой - вправо (ось X).Когда пользователь щелкает и тащит автомобиль в направлении, я хочу, чтобы изображение автомобиля переключалось на то, которое обращено в том же направлении.

Вот что у меня есть:

У меня есть DIV с именем #car, которому назначен этот код 

$(function() {
    $( "#car" ).draggable();
  });

, и он просто перетаскивается.Затем у меня есть изображение, обернутое в #car div, которое называется #myImage, а HTML-код выглядит следующим образом: 

 <img id="myImage" src="" alt="" height="42" width="42" />

Затем у меня есть код Jquery, который я пытаюсь «подключить» к #myImageниже. 

function carDirection(){
var currentPosition = $("#myImage").text(this.id + offset.left );
if ("#myImage" <= currentPosition){
    $("#myImage").attr("src", "leftCar.png");   
  }
  else {
    $("#myImage").attr("src", "rightCar.png");
  }
};

Итак, чтобы подвести итог и сделать это еще яснее, я создаю div, использующий перетаскиваемый эффект JQuery, и я просто хочу, чтобы изображение, обернутое в него, менялось в зависимости от того, перетаскивает ли его пользовательвлево или вправо с помощью мыши.Изображение должно оставаться неизменным после того, как пользователь отпустит мышь.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 30 марта 2012

Вам необходимо использовать обратный вызов drag для .draggable(), чтобы определить, сместился ли автомобиль влево или вправо с прошлого раза.

РЕДАКТИРОВАТЬ: код обновлен, чтобы быть более понятным с большим количеством комментариев.

Пример jsFiddle доступен . 

// defining custom object to hold images to use. 
// Change as required in actual code.
var sprites = {
    car: {
        left: 'http://placehold.it/200&text=Left',
        right: 'http://placehold.it/200&text=Right'
    }
};

$(function() {
    var carImage = document.getElementById('myImage'); // no need to use jQuery to get by ID
    $('#car').draggable({
        // define the behaviour to be run continually
        // whilst car is being dragged.
        drag: function(event, ui) {
            // get the last left position (think x co-ordinate)
            // of the thing you are dragging (the helper) 
            // using the jQuery data method, which stores
            // that info against the actual HTML element itself.
            // Note that if this is the first time the function is
            // run, there IS no such data, so the "|| thisX" ensures 
            // that there is a value the first time.
            var thisX = ui.offset.left,
                lastX = ui.helper.data('lastLeft') || thisX;
            if (thisX < lastX) {
                // must be moving left
                carImage.src = sprites.car.left;
            } 
            if (thisX > lastX) {
                // must be moving right
                carImage.src = sprites.car.right;
            }
            // don't do anything if the "x-coord" is the same
            // or else it causes flickering.

            // store the current position to compare with next time
            // this function is run.
            ui.helper.data('lastLeft', thisX);
        }
    });
});​

Обратите внимание, что было бы лучше использовать классы CSS и изображение спрайта (одно изображение, содержащее как левое, так и правое автомобильные изображения).), поскольку я считаю, что изменение положения фона одного и того же изображения быстрее для большинства браузеров, чем изменение src.Кроме того, вам нужно загрузить только одно изображение, поэтому вам не нужно загружать изображение в другом направлении при первом изменении.Имеет ли это смысл?

Есть ли что-то еще из моего кода, которое сейчас не имеет смысла?

0 голосов
/ 30 марта 2012 
var offset = $("#myImage").offset();
$("#myImage").draggable({
    drag: function() {
       var this_offset = $(this).offset();
       if(this_offset.left < offset.left) {
          $(this).attr('src','leftCar.png');
       } else {
          $(this).attr('src','rightCar.png');   
       }
    }
});​

Я включил jsFiddle , используя цвет фона вместо изображений.

...