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

Posted 2023-05-08

【中文标题】鼠标摇动时jQuery可拖动背景图像更改

【英文标题】：jQuery draggable background image change on mouse shake

【发布时间】：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 像素，则可能意味着它已被晃动

【参考方案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