jQuery 鼠标摇动时可拖动的背景图像发生变化

Question

我一直在玩 jQuery-UI 可拖动 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，所以这取决于你 "shake" 实际是什么

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

jQuery 鼠标摇动时可拖动的背景图像发生变化

jQuery draggable background image change on mouse shake

jquery

jquery-ui

draggable

animated-gif