javascript - 模拟指针轨迹效果-6ren

javascript - 模拟指针轨迹效果

转载作者：可可西里更新时间：2023-11-01 15:01:49

25

4

我正在尝试模拟 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/

25

4

0

文章推荐： javascript - 如何创建循环 Jquery

文章推荐： css - 当

的内容宽度超过兄弟的宽度时，使

呈现滚动条

文章推荐： java - 删除两个重复行

c - *指针 = - *指针？
我刚接触 C 语言几周，所以对它还很陌生。我见过这样的事情 * (variable-name) = -* (variable-name) 在讲义中，但它到底会做什么？它会否定所指向的值吗？最佳答案
c - void 指针 = int 指针 = float 指针
我有一个指向内存地址的void 指针。然后，我做 int 指针 = void 指针 float 指针 = void 指针然后，取消引用它们以获取值。 { int x = 25; vo
c++ - 需要将char*(指针)转换为wchar_t*(指针)
我正在与计算机控制的泵进行一些串行端口通信，我用来通信的 createfile 函数需要将 com 端口名称解析为 wchar_t 指针。我也在使用 QT 创建一个表单并获取 com 端口名称作为
C 指针。将大数赋值给 char * 指针
#include "stdio.h" #include "malloc.h" int main() { char*x=(char*)malloc(1024); *(x+2)=3; --
c - int 指针转换为 void 指针，然后转换为 double 指针
#include #include main() { int an_int; void *void_pointer = &an_int; double *double_ptr = void
从 C 中的 3D 指针/数组调用 2D 指针/数组
对于每个时间步长，我都有一个二维矩阵 a[ix][iz]，ix 从 0 到 nx-1 和 iz 从 0 到 nz-1。为了组装所有时间步长的矩阵，我定义了一个长度为 nx*nz*nt 的 3D 指针
c - 释放已分配给 char 指针(字符串)数组的内存。我必须释放每个字符串还是只释放 "main"指针？
我有一个函数，它接受一个指向 char ** 的指针并用字符串填充它(我猜是一个字符串数组)。 *list_of_strings* 在函数内部分配内存。 char * *list_of_strings
c - 使用 malloc 初始化 char 指针 VS 不使用 malloc 直接将字符串赋给 char 指针
我试图了解当涉及到字符和字符串时，内存分配是如何工作的。我知道声明的数组的名称就像指向数组第一个元素的指针，但该数组将驻留在内存的堆栈中。另一方面，当我们想要使用内存堆时，我们使用 malloc，
c# - 通过 P/Ivoke 在 C# 中传递 Struct 指针(主体中带有 char 指针)
我有一个 C 语言的 .DLL 文件。该 DLL 中所有函数所需的主要结构具有以下形式。 typedef struct { char *snsAccessID; char *
javascript使递归数组遍历并更新一些内部值(指针)
我得到了以下数组: let arr = [ { children: [ { children: [], current: tru
C程序输出困惑(指针)
#include int main(void) { int i; int *ptr = (int *) malloc(5 * sizeof(int)); for (i=0;
c程序，指针
我正在编写一个程序，它接受一个三位数整数并将其分成两个整数。 224 将变为 220 和 4。 114 将变为 110 和 4。基本上，您可以使用模数来完成。我写了我认为应该工作的东西，编译器一直说
循环中指向int的C++指针？
好吧，我对 C++ 很陌生，我确定这个问题已经在某个地方得到了回答，而且也很简单，但我似乎找不到答案.... 我有一个自定义数组类，我将其用作练习来尝试了解其工作原理，其定义如下: 标题: class
C++ `this` 指针
1) this 指针与其他指针有何不同？据我了解，指针指向堆中的内存。如果有指向它们的指针，这是否意味着对象总是在堆中构造？ 2)我们可以在 move 构造函数或 move 赋值中窃取this指针吗？
C结构，指针
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: C : pointer to struct in the struct definition 在我的初学者类
复制多维数组(指针)
我有两个指向指针的结构指针 typedef struct Square { ... ... }Square; Square **s1; //Representing 2D array of say,
c变量分配内存，指针
变量在内存中是如何定位的？我有这个代码 int w=1; int x=1; int y=1; int z=1; int main(int argc, char** argv) { printf
c编程语言，指针
#include #include main() { char *q[]={"black","white","red"}; printf("%s",*q+3); getch()
指向类成员的模板函数的C++指针
我在“C”类中有以下函数 class C { template void Func1(int x); template void Func2(int x); }; template void
64位机器上的c++指针
我在64位linux下使用c++，编译器(g++)也是64位的。当我打印某个变量的地址时，例如一个整数，它应该打印一个 64 位整数，但实际上它打印了一个 48 位整数。 int i; cout <<

首页

博学

6Ren·AI

商城

javascript - 模拟指针轨迹效果