jQuery 可拖动背景图像随鼠标震动而变化

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