鼠标摇动时jQuery可拖动背景图像更改答案

【问题标题】：jQuery draggable background image change on mouse shake鼠标摇动时jQuery可拖动背景图像更改
【发布时间】：2018-03-29 04:52:51
【问题描述】：

我一直在使用 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>

【问题讨论】：

如果您生成代码会有所帮助，最好是在 FiddleJs 或类似的 plunker 中，以便人们可以加入并提供帮助。我将帮助您开始使用鼠标拖动事件以及一些计算和计时器来定义“震动”。
谢谢，我不知道 mousedrag 事件。如果我找不到解决方案，可能会试一试。
您可以使用setInterval() 函数并测量在那段时间内移动的像素数量。如果连续 3 次移动超过 100 像素，则可能意味着它已被晃动

标签： jquery jquery-ui draggable animated-gif

【解决方案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 次将其移动 25 像素，所以这取决于您实际上是什么“摇晃”

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

【讨论】：