如何使用 css 变换平滑地移动圆圈?
How do I move a circle in a smooth way with css transform?
我有 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)');
});
});
问题是圈子滞后了。能否以更好的方式完成此操作,使圆圈移动平滑?
这是一个改进的fiddle:https://jsfiddle.net/Lsh9tzjq/
最重要的是:
您可以通过操作 top/left css 属性来设置圆的位置
$('#mycircle').css({'top':y+'px', 'left':x+'px'});
并为鼠标事件制作圆圈 'transparent'。
pointer-events: none;
这可以防止圆圈意外捕获鼠标事件导致感知延迟。
我有 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)');
});
});
问题是圈子滞后了。能否以更好的方式完成此操作,使圆圈移动平滑?
这是一个改进的fiddle:https://jsfiddle.net/Lsh9tzjq/
最重要的是:
您可以通过操作 top/left css 属性来设置圆的位置
$('#mycircle').css({'top':y+'px', 'left':x+'px'});
并为鼠标事件制作圆圈 'transparent'。
pointer-events: none;
这可以防止圆圈意外捕获鼠标事件导致感知延迟。