There is an image placed in a div block. It is necessary to realize the movement of a point in this image. Is there any library that will allow smooth movement of a point along given coordinates relative to this div block?

  • Need to move from point to point in a straight line? - Yuri
  • Now at least some movement to implement. Thank you very much for the answer - user190794
  • In my code, if you add a set of points, it will move in a circle. And if you change the parameters of animate , then it will generally be good - Yuri

1 answer 1

$('.block img').movement([список ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ], ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ двиТСния);

 $.prototype.movement = function (coor, speed) { if(coor !== '' && coor !== undefined && coor[0].x !== undefined && coor[0].y !== undefined){ var num = coor.length - 1, pos = 0, e = this; if(speed == undefined || /\d+/.exec(speed) == null){speed = 1000}; $(e).animate({top: coor[pos].y - ($(e).outerHeight() / 2), left: coor[pos].x - ($(e).outerWidth() / 2)}, speed); var int = setInterval(function() { if(num == pos){ clearInterval(int); }else{ pos++; $(e).animate({top: coor[pos].y - ($(e).outerHeight() / 2), left: coor[pos].x - ($(e).outerWidth() / 2)}, speed); }; }, speed); }; }; $(function() { $('.block img').movement([{x: 150, y: 150}, {x: 20, y: 300}], 2000); }); 
 .block {width: 300px; height:300px; position:relative;background-color:black} .block img {position:absolute;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block"> <img src="https://i.stack.imgur.com/WZsJn.jpg?s=48&g=1"> </div>