Question

我一直在玩jQuery-UI Draggable https://www.jcmatheson.com/page/blog.html，并且想知道是否有一种方法可以将gif更改为不同的背景图像，如果你用鼠标拖动并用力摇晃它？基本上，你拖动睡觉的头部，如果摇晃，改变醒来的表情jpg。

很抱歉，如果这很模糊，我对jQuery很新，这是我关于SO的第一个问题。

谢谢！

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#draggable" ).draggable();
  });
  </script>

#draggable { width: 256px; height: 256px; padding: 0.5em; }

.ui-widget-content {
    border: none;
    background: #ffffff url(https://piskel-imgstore-b.appspot.com/img/5505e3cf-b2a5-11e7-a7d6-77854951e175.gif) 50% 50% repeat-x!important;
    color: #222222;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="draggable" class="ui-widget-content">
  <p></p>
</div>

Answer 1

您可以使用setInterval（）函数并确定当时移动的像素数量。如果连续3次移动超过25px，那可能意味着它被动摇了

$(".shakeMe").draggable({
   
});

var lastLeft;
var shakeCount = 0;
var lastShake = 'right';
setInterval(function(){
   left = $(".shakeMe").offset().left;
   // var dist = Math.abs(lastLeft - left);
   var dist = lastLeft - left;
   if(dist > 25 && lastShake == 'right') {
      shakeCount++;
      lastShake == 'right';
      if(shakeCount >= 3) {
          $(".shakeMe").css("background", "red");
      }
   } else {
      if(dist < -25 && lastShake == 'left') {
         shakeCount++;
         lastShake == 'left';
      if(shakeCount >= 3) {
          $(".shakeMe").css("background", "red");
      }
      }
      shakeCount = 0;
   }
   console.info(shakeCount);
   lastLeft = left;
   
}, 200);

这是每200毫秒（五分之一秒）运行，但这可以减少。

另外，你必须连续3次移动它25px，所以它取决于你实际上是什么“摇动”

https://codepen.io/OliWebBoss/pen/mBQNxJ

jQuery可拖动的背景图像更改鼠标摇动

1 个答案: