jQueryドラッグ可能な背景画像がマウスの揺れで変化する

Question

jQuery-UI Draggable https://www.jcmatheson.com/page/blog.htmlと一緒に遊んでいて、ドラッグしてマウスで十分に揺らすとgifを別の背景画像に変更する方法があるのだろうかと思っていました？基本的に、あなたは眠っている頭の周りをドラッグし、揺れている場合、目覚める表現jpgに変わります。

申し訳ありませんが、これはかなり漠然としていますが、私はjQueryの新機能です。これが私の最初の質問です。

ありがとうございます！あなたがたsetInterval（）関数を使用し、その時間内に移動するピクセルの量をmesureでき

<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

。行に複数の25ピクセルの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);

を振とうされていますこれは、すべての200ミリ秒（1秒の五分の一）を実行しているが、これを低減することができました。

はまた、あなたが行に25ピクセル3回、それを動かすために持っているので、それはあなたが何を「振る」、実際にあなたが来て、コードを生成場合

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