Question

我正在尝试模拟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，我无法做到这一点。

Answer 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>

模拟指针轨迹效果

1 个答案: