jQuery: 延迟跟随光标
jQuery: Follow cursor with delay
我想要一个 div 跟随光标移动并像这样短暂延迟:http://vanderlanth.io/
如您所见,'follower' 的动画延迟很短。
我重建了一些不太好用的功能:
$(document).ready(function () {
$("body").mousemove(function (e) {
handleMouseMove(e);
});
function handleMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
$(".cursor-follower").animate({
left: (x - 16),
top: (y - 16)
}, 16);
$(".cursor").css({
left: (x - 4),
top: (y - 4)
});
}
});
它相当滞后,动画不是很流畅和轻松。您还有其他解决方案吗?
您可以使用 CSS 转换来实现此效果。在 JavaScript 中,您只需更新 div.
的位置
$(document).on('mousemove', (event) => {
$('.follower').css({
left: event.clientX,
top: event.clientY,
});
});
.follower {
width: 20px;
height: 20px;
background-color: grey;
border-radius: 10px;
transition-duration: 200ms;
transition-timing-function: ease-out;
position: fixed;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>
我想要一个 div 跟随光标移动并像这样短暂延迟:http://vanderlanth.io/
如您所见,'follower' 的动画延迟很短。
我重建了一些不太好用的功能:
$(document).ready(function () {
$("body").mousemove(function (e) {
handleMouseMove(e);
});
function handleMouseMove(event) {
var x = event.pageX;
var y = event.pageY;
$(".cursor-follower").animate({
left: (x - 16),
top: (y - 16)
}, 16);
$(".cursor").css({
left: (x - 4),
top: (y - 4)
});
}
});
它相当滞后,动画不是很流畅和轻松。您还有其他解决方案吗?
您可以使用 CSS 转换来实现此效果。在 JavaScript 中,您只需更新 div.
的位置$(document).on('mousemove', (event) => {
$('.follower').css({
left: event.clientX,
top: event.clientY,
});
});
.follower {
width: 20px;
height: 20px;
background-color: grey;
border-radius: 10px;
transition-duration: 200ms;
transition-timing-function: ease-out;
position: fixed;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>