我正在尝试模拟 windows 指针轨迹效果:
Windows 中的设置相同。这是我尝试过的:
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
$("#trail" + (a - 6)).remove();
document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
a++;
});*{cursor:none;}
#cursor {
position:fixed;
z-index:999999;
width:12px;
height:19px;
}
.trail {
z-index:1;
position:fixed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>但是我对这段代码没有什么问题:
- 我不能按按钮或其他任何东西，如果我将
z-index更改为负数，则光标位于按钮后面。 - 如果页面缩放不同，则 100% 光标大小变大/变小。
- 太快了，在 windows 指针轨迹中，光标轨迹之间的间隙更大。
- 我希望可以更改轨迹长度(就像在 Windows 设置中一样)，但由于问题 1，我不能这样做。
最佳答案
您可以使用 pointer-events:none 来解决问题 1，要解决问题 2，您可以使用 "transform:scale("+ (parent.document.body.clientWidth)/(window.outerWidth) + ")"，解决问题3只能在奇数/偶数循环中添加光标图像(我将其与windows指针轨迹进行比较，速度相同)，并解决问题4你可以使用动画时间:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
position:fixed;
width:0;
height:0;
transform-origin:0 0;
}
#trails
{
pointer-events: none;
position:fixed;
top:0;
left:0;
z-index:99998;
width:100%;
height:100vh;
}
#cursor
{
pointer-events:none;
position:fixed;
z-index:999999;
width:12px;
height:19px;
transform-origin:0 0;
}
@keyframes pointer_trails
{
0%{width:12px;height:19px;}
100%{width:12px;height:19px;}
}
</style>
<script>
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = true;
//makes image stay the same size:
$(document).ready(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
$(window).resize(function () {
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
//pointer trails effect:
document.addEventListener("mousemove", function (e) {
document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
if (document.getElementById("_checked").checked && a)
$("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
a = !a;
$('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
$('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
});
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>
关于javascript - 模拟指针轨迹效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46462951/