jQuery可拖動的背景圖像更改在鼠標搖晃

我一直在玩jQuery-UI Draggable https://www.jcmatheson.com/page/blog.html，並想知道是否有一種方法來更改GIF到不同的背景圖像，如果你用鼠標拖動和足夠堅硬？基本上，你拖動睡覺的頭部，如果搖晃，改變成醒來的表情jpg。jQuery可拖動的背景圖像更改在鼠標搖晃

對不起，如果這是非常模糊的，我對jQuery很新，這是我的第一個問題。

謝謝！

<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>

來源

2017-10-17 C453

它幫助，如果你生產來代碼，最好是在FiddleJs或類似的笨重的人，所以人們可以跳進來幫忙。我會幫你開始你想使用mousedrag事件加上一些計算和定時器，以定義一個「震撼」。 – DanteTheSmith

謝謝，我不知道mousedrag事件。如果我找不到解決方案，可能會放棄。 – C453

你可以使用'setInterval（）'函數並確定在那個時候移動的像素數量。如果連續三次移動100px以上，那可能意味着它被震動了 –

你可以使用setInterval（）函數和MESURE像素的量在這段時間移動。如果連續移動超過25px的3倍，這可能意味着它已經動搖

$(".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);

這是運行每200ms（第二的五分之一），但是這可能會減少。

而且，你要移動它25px的3倍成一排，所以這取決於你什麼是「震動」實際上是

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

來源

2017-10-17 15:31:12

jQuery可拖動的背景圖像更改在鼠標搖晃

回答

相關問題