[英]How do I use JQuery to move the user's screen down to the bottom, in a very smooth way?
[英]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)');
});
});
問題是圈子滯后。 可以以更好的方式完成此操作,以使圓圈平滑移動嗎?
這是一個改進的小提琴: https://jsfiddle.net/Lsh9tzjq/
最重要的是:
您通過操作頂部/左側 css 屬性來設置圓的 position
$('#mycircle').css({'top':y+'px', 'left':x+'px'});
並使鼠標事件的圓圈“透明”。
pointer-events: none;
這可以防止圓圈意外捕獲導致感知滯后的鼠標事件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.