Как плавно переместить круг с помощью преобразования css? - PullRequest
Новая
       19

Как плавно переместить круг с помощью преобразования css?

0 голосов
/ 14 апреля 2020

У меня есть 2 деления, как это. 

<div id="myimage" style="background-image: url('myimage.png'); background-size: cover; width: 500px; height: 500px"></div>
<div id="mycircle" style="border:2px solid red; height:100px; width:100px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%"></div>

Я хочу, чтобы с помощью мыши перемещать круг по изображению. Это прекрасно работает. 

<script>
$(document).ready(function() {
    $('#myimage').on("mousemove", function(event) {
        var offset = $(this).offset();
        var x = event.pageX - offset.left;
        var y = event.pageY - offset.top;
        $('#mycircle').css('transform', 'translate('+x+'px, '+y+'px)');
    });
});

Проблема в том, что круг отстает. Можно ли сделать это лучше, чтобы круг двигался плавно?

1 Ответ

1 голос
/ 14 апреля 2020

Вот улучшенная скрипка: https://jsfiddle.net/Lsh9tzjq/

Наиболее важно:

Вы устанавливаете положение круга, манипулируя верхним / левым css свойства 

 $('#mycircle').css({'top':y+'px', 'left':x+'px'});

и сделайте круг «прозрачным» для событий мыши. 

pointer-events: none;

Это предотвращает случайный захват круга мышью событий мыши, вызывающих заметное отставание.

...