使用 HTML 或 JS/jQuery 扭曲光标移动 [重复]答案

【问题标题】：Distorted cursor movements using HTML or JS/jQuery [duplicate]使用 HTML 或 JS/jQuery 扭曲光标移动 [重复]
【发布时间】：2015-02-09 13:36:26
【问题描述】：

我试图在页面上实现扭曲或弯曲的鼠标移动（尽管用户移动鼠标很好）。

我不想显得粗鲁、粗鲁或刻薄，但我想模拟帕金森或关节炎患者试图在网页上移动鼠标。

我如何使用 HTML、JS/Jquery 甚至 CSS 来实现这一点？我什至想过在页面上使用小网格并让鼠标光标捕捉到那些网格边缘以实现效果，但找不到与此相关的任何代码（或者我是否使用错误的关键字搜索？？）

我没有任何起始代码，如果这可能给你们任何人带来麻烦，我深表歉意，但我现在很感激任何帮助。

我只是在寻找一种浏览器解决方案，我们希望能提供最大的浏览器兼容性。

【问题讨论】：

我看过指针锁演示，但它没有解决我的查询。我想模拟鼠标指针经历震颤。我不希望用户在单击画布后不得不让他们的浏览器隐藏他们的鼠标。效果和体验需要是无缝的，因为用户需要在不执行任何操作的情况下感受效果。尽管我的用法与您提供的链接中的 OP 几乎相同，但我在线程中看不到任何允许在浏览器中实现此效果的解决方案。

标签： javascript jquery html css

【解决方案1】：

在DIV 中，使用cursor:none; 隐藏光标
创建一个 .png 光标图像并在 mousemove 上使用 jQ 移动它（left、top）
使用 setTimeout 随机化 .png margin-left 和 margin-top （为了使重新定位平滑，请使用 CSS3 transition 或使用 jQ .animate()）。

注意：脚本无法知道手是否仍在鼠标上；）

function rand(min, max) {return Math.random() * (max - min) + min;}

var $cursor = $('div img');

$('div').mousemove(function(e) {  
  $cursor.css({
    left: e.pageX,
    top:e.pageY
  });
}).hover(function(e){
  $cursor.toggle();
});

(function tremor(){
  $cursor.css({
      marginLeft: rand(-15,15), // arm tremor
      marginTop:  rand(-30,30)  // hand contractions
  });
  setTimeout(tremor, rand(50,100));
}());

div{
  position:absolute;
  background:#eee;
  height:100%;
  width:100%;
  cursor:none;
}

div img{
  display:none;
  position:absolute;
  transition: margin 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><img src="http://i.stack.imgur.com/KwMGA.png"></div>

【讨论】：

当我在 SO 中运行代码 sn-p 时，代码运行得非常好。当我在最后尝试它时，它只会显示灰色的 BG 并隐藏指针。我错过了什么？但是很棒的工作，正是我想要的
@masmrdrr 你缺少指针图像
我已经保存了图像并在本地调用它，仍然看不到它...请您使用完整的 HTML 代码修改您的答案，会非常有帮助.. 麻烦您了
我已经让它工作了，似乎没有与标题部分中的
@RokoC.Buljan 这是一个非常出色的例子。我希望我能对这个答案投两次赞成票。