javascript - 图像作为光标,滚动时应该移动
问题描述
我用更大的图像替换了我的光标,以便在网站上有一个大光标。实际上,它工作得很好并且跟随鼠标但是一旦我滚动我的页面,光标就会停留在与以前相同的位置并且一旦我再次移动鼠标就会更新。
我的想法是让鼠标在滚动时立即移动,而不是稍后传送。
这是代码,您可以理解。谢谢您的帮助!
$(document).on('mousemove', function(e){
$('#custom-cursor').css({
left: e.pageX -30,
top: e.pageY-25,
pointerEvents: 'none'
});
});
#custom-cursor{
width: 230px;
height: 300px;
position: absolute;
background-size: 230px 300px;
background-image: url("https://i.imgur.com/6uh0F5h.png");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>
解决方案
好吧,您还需要通过滚动距离的量来计算相对鼠标位置,如下所示:
编辑:我只是为垂直滚动做的,你可能还需要为水平滚动做同样的事情。
let lastX, lastY, lastScrolled = 0;;
$(document).on('mousemove', function(e) {
lastX = e.pageX - 30;
lastY = e.pageY - 25;
$('#custom-cursor').css({
left: e.pageX - 30,
top: e.pageY - 25,
pointerEvents: 'none'
});
});
$(window).scroll(function(event) {
if (lastScrolled != $(window)
.scrollTop()) {
lastY -= lastScrolled;
lastScrolled = $(window)
.scrollTop();
lastY += lastScrolled;
}
$('#custom-cursor').css({
left: lastX,
top: lastY,
pointerEvents: 'none'
});
});
#custom-cursor {
width: 30px;
height: 30px;
position: absolute;
background-size: 230px 300px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>
<p>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the
page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make
the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page
scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br>make the page scollable<br></p>
推荐阅读
- rasa-nlu - Intent 为 Rasa nlu 返回 Null
- html - 绝对定位 div 内的全高 div
- python - Tensorflow Adam 优化器与 Keras Adam 优化器
- javascript - 当 document.addEventListener('scroll') 存在时如何停止背景抖动
- c# - Ef core:执行 MaxAsync 时序列不包含任何元素
- c# - 通过纯c#代码生成App.Config文件的最简单方法是什么
- mysql - MySQL 查询:如何获取按最新提交日期排序的热门帖子
- java - 运行 netlogo-headless.sh 时无法识别选项的来源?
- arrays - Angular 6 - 将 JSON 转换为数组
- python - 如何只导入 __init__.py 的一部分?