时间戳

首页 > 解决方案 > 如何使用 css 变换平滑地移动圆圈？

jquery - 如何使用 css 变换平滑地移动圆圈？

问题描述

我有2个这样的div。

<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)');
    });
});

问题是圈子滞后。可以以更好的方式完成此操作，以使圆圈平滑移动吗？

标签： jquerytranslate

解决方案

这是一个改进的小提琴：https ://jsfiddle.net/Lsh9tzjq/

最重要的是：

您可以通过操作顶部/左侧 css 属性来设置圆的位置

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

并使鼠标事件的圆圈“透明”。

pointer-events: none;

这可以防止圆圈意外捕获导致感知滞后的鼠标事件。

推荐阅读