Div以光标为中心
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Div以光标为中心相关的知识，希望对你有一定的参考价值。
我正在尝试使用设置为跟随光标的<div>创建自定义光标。
在下面的片段中，这非常有效，但是当向下滚动页面时，div不会跟随滚动运动完成，导致运动和感觉不稳定。
有没有办法确保这不会发生，并且<div>完全跟随光标而不管？
// vars
var $cursor = $('.custom-cursor');
// Follow cursor
$('body').on('mousemove', function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$cursor.css({
left: relX,
top: relY
});
});body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="custom-cursor">
</div>
</body>答案
在代码中插入此代码：
$( window ).scroll(function() {
//Your mouse move function
});
要获得滚动鼠标的当前位置，请使用Get mouse position on scroll。
这是fiddle http://jsfiddle.net/1byfq24g/与实现代码的链接。
// vars
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
var $cursor = $('.custom-cursor');
// Follow cursor
$('body').on('mousemove', function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
xMousePos = relX;
yMousePos = relY;
$cursor.css({
left: relX,
top: relY
});
});
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if (lastScrolledTop != $(document).scrollTop()) {
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
console.log("x = " + xMousePos + " y = " + yMousePos);
$cursor.css({
left: xMousePos,
top: yMousePos
});
});body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<body>
<div class="custom-cursor">
</div>
</body>另一答案
检查此更新的代码。我希望它会对你有所帮助。
var $cursor = $('.custom-cursor');
// Follow cursor
var xMousePos = 0;
var yMousePos = 0;
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
$(document).mousemove(function(event) {
captureMousePosition(event);
})
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
xMousePos -= lastScrolledLeft;
lastScrolledLeft = $(document).scrollLeft();
xMousePos += lastScrolledLeft;
}
if (lastScrolledTop != $(document).scrollTop()) {
yMousePos -= lastScrolledTop;
lastScrolledTop = $(document).scrollTop();
yMousePos += lastScrolledTop;
}
$cursor.css({
left: xMousePos,
top: yMousePos
});
});
function captureMousePosition(event) {
xMousePos = event.pageX;
yMousePos = event.pageY;
$cursor.css({
left: xMousePos,
top: yMousePos
});
}body {
background: red;
height: 1000vh;
position: relative;
}
.custom-cursor {
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
z-index: 9999;
background-color: yellow;
backface-visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%); // Center over cursor
transition: width .3s ease-in-out, height .3s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="custom-cursor">
</div>
</body>以上是关于Div以光标为中心的主要内容，如果未能解决你的问题，请参考以下文章