Question

我正在使用JQuery并希望执行以下操作。我有2张汽车的图像。一个面向左边，一个面向右边（x轴）。当用户点击并沿我想要图像的方向拖动汽车时汽车切换到面向同一方向的汽车。

这是我到目前为止所拥有的：

我有一个名为#car的DIV，已分配给此代码

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

它拖得很好。然后我有一个包含在名为#myImage的#car div中的图像，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");
  }
};

总而言之，让我更清楚一点，我正在创建一个使用JQuery可拖动效果的div，我只想让一个包含在其中的图像根据用户是用鼠标向左还是向右拖动来改变。用户放开鼠标后，图像应保持不变。

谢谢。

Answer 1

您需要使用drag的{{1}}回调来确定自上次以来汽车是否向左或向右移动。

编辑：更多评论更新代码更清晰。

jsFiddle example is available

.draggable()

请注意，最好使用CSS类和精灵图像（包含左右汽车图像的单个图像），因为我认为更改同一图像的背景位置对于大多数浏览器而言比更改{更快{1}}。此外，您只需要加载一个图像，因此您不需要在第一次更改时将图像加载到另一个方向。这有意义吗？

我的代码中还有其他内容现在没有意义吗？

Answer 2

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。

Jquery - 根据用户拖动方向进行图像切换

2 个答案: