1

Есть изображение, помещённое в div блок. Необходимо реализовать перемещение точки на этом изображении. Существует ли какая-нибудь библиотека, которая позволит осуществить плавное движение точки по заданным координатам относительно этого div блока?

3
  • Нужно движение от точки к точке по прямой?
    – Yuri
    11 дек 2016 в 11:14
  • Сейчас бы хоть какое-нибудь движение реализовать. Спасибо большое за ответ
    – user190794
    11 дек 2016 в 12:40
  • По моему коду, если добавить множество точек, то оно будет по кругу двигаться. А если ещё изменить параметры animate, то вообще будет хорошо
    – Yuri
    11 дек 2016 в 12:43

1 ответ 1

2

$('.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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.