は、私は窓のポインタの軌跡効果をシミュレートしようとしているポインタの軌跡効果

をシミュレートします。は、私は窓のポインタの軌跡効果をシミュレートしようとしているポインタの軌跡効果

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％異なる場合は、カーソルのサイズが大きくなります。
これは速すぎます。ウィンドウのポインタの軌跡には、カーソルの軌跡の間に大きなギャップがあります。
あなたが問題を解決するために、問題1を解決するためにpointer-events:noneを使用することができますので、問題1.

出典

2017-09-28 Anonymous

z-indexと単純にポインタイベントを使用します。none – user5014677

の私はトレイルに（Windowsの設定のように）の長さを変更することにしたいが、私はそれを行うことはできません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>

出典

2017-09-28 07:18:24

は、私は窓のポインタの軌跡効果をシミュレートしようとしているポインタの軌跡効果

答えて

関連する問題