jQuery draggable image d'arrière-plan

? Fondamentalement, vous faites glisser la tête endormie autour et si secoué, change pour une expression jpg éveillé. Désolé si cela est assez vague, je suis très nouveau à jQuery et ceci est ma première question sur SO.jQuery draggable image d'arrière-plan

Merci!

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

Source

2017-10-17 C453

Il aide si vous produisez le code venir, de préférence dans le Plunker de FiddleJs ou similaire afin que les gens puissent intervenir et aider. Je vais vous aider à démarrer vous voulez utiliser des événements mousedrag couplé avec quelques calculs et minuterie afin de définir un "shook". – DanteTheSmith

Merci, je n'étais pas au courant des événements mousedrag. Je vais probablement essayer si je ne trouve pas de solution pour cela. – C453

Vous pouvez utiliser une fonction 'setInterval()' et mesurer la quantité de pixels déplacés pendant cette période. Si déplacé plus de 100px 3 fois de suite, cela pourrait signifier qu'il a été secoué –

On peut utiliser une fonction setInterval() et mesure la quantité de pixels déplacés à ce moment-là. Si déplacé plus de 25px 3 fois de suite, cela pourrait signifier qu'il a été secoué

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

Ceci est en cours d'exécution tous les 200ms (un cinquième de seconde), mais cela pourrait être réduit.

De plus, vous devez le déplacer 25px 3 fois de suite, donc cela dépend de ce que vous ce qu'est un « secouer » pour réellement être

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

Source

2017-10-17 15:31:12

jQuery draggable image d'arrière-plan

Répondre

Questions connexes