我为一个基金会工作，该基金会旨在提高人们对互联网无障碍的认识。为了演示，我们想提供一个小型研讨会，模拟不同的残疾/缺陷。这是通过一个专门为这次演示创建的网站来完成的。
其中一个被证实的缺陷是有震颤，这意味着经历颤抖，难以控制的手部运动。由于这种缺陷，当鼠标在链接上时，很难准确地移动鼠标光标并按下鼠标按钮。一些老年人和有疾病的人，如帕金森氏症患者，都可能患有震颤。
现在我想以一种不可预测的方式移动鼠标光标，这样人们就很难点击一个小按钮。因为JavaScript不允许直接移动鼠标光标，所以我正在寻找其他方法来实现这一点。我有以下想法:
使用模拟鼠标晃动的鼠标驱动程序/实用程序。 通过CSS隐藏鼠标光标，在原始光标的位置放置一个晃动的鼠标光标的GIF动画(使用JavaScript)，然后让目标链接每隔几秒就可以点击一次，持续一秒钟左右。这至少会给人一种感觉，好像总是在错误的时刻点击。
虽然第一个想法很酷，但我找不到这样的工具，无论是Mac还是Windows。我自己也没有任何编程技能。
第二个想法似乎有点笨拙，但我认为它会达到预期的效果。
有人有别的想法吗?
当前回答
我做了一个快速的演示，希望你能够在此基础上编写代码，使用指针锁API。
我分叉这个指针锁演示回购和修改它，以添加一个随机移动元素。
这是我GitHub页面的链接:https://aristocrates.github.io/pointer-lock-demo 这是我的回购链接:https://github.com/aristocrates/pointer-lock-demo
重要的javascript代码包含在app.js的canvasLoop(e)方法中。
与最初的演示相比，我唯一改变的地方是台词
x += movementX * 2;
y += movementY * 2;
我添加了两条线来表示随机移动:
x += Math.floor(Math.random()*3 - 1);
y += Math.floor(Math.random()*3 - 1);
还有很多地方你可以改进，但希望这能帮助你开始。
其他回答
模拟地震的低水平部分现在已经很好地解决了。我将添加一些专注于模拟的震颤类型的东西:
大多数答案实现了一个鼠标光标在X和Y方向上具有固定的最大步宽的随机路径上移动。
这应该可以很好地满足用例，使它难以点击一个特定的区域，如按钮。
对于模拟由帕金森病引起的震颤引起的UI问题的更普遍的问题，至少实际模拟这种震颤的手部运动是有趣的。 我怀疑随机游走可能不是一个很好的近似。
当然，可能很难获得真正的手部震颤运动的痕迹数据，但肯定有关于分析这种震颤的论文:
帕金森病患者手部运动的参数化表示是关于如何绘制手部运动的三维轨迹。 这篇论文是付费的，但右上方的预览图，在书的图片上标记为“看>”，展示了一些有趣的手迹数据的不同表示形式。
这只是一个让震颤“正确”的想法，你可以记录一个真实病人的鼠标运动，这使它更真实，当你告诉人们数据来自哪里。
这里有一个脚本，让猫跟随你的鼠标光标，你可以调整一个，让第二个光标跟随(跳跃)你的光标。该页面正在计算第二个游标的位置，因此它还可以确定单击事件是否成功。
如果可以的话，请让它基于网络，这样你会接触到更多的人，而不是让他们安装一个程序或激活flash或其他任何东西。
你可以使用一套模拟老年人的服装，比如本文中描述的那种……我怀疑手颤抖的部分只是一个振动电机绑在手腕上，加上一些厚手套，使手通常笨拙。
而不是试图移动指针，你可以移动应用程序(网页)。我写了一个简单的html表单，其中有一些输入字段。当您将鼠标移动到表单上时，表单也会移动。
您可以在jsfiddle上看到移动表单的演示。尝试单击其中一个输入字段来查看效果。
我使用jquery的抖动效果来实现这一点。javascript的震动效果看起来像这样，只是导致表单上下移动，每当鼠标移动到它:
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").hover(function () {
$(this).effect("shake", { direction: "up", times: 1, distance: 40}, 1000);
});
});
</script>
虽然形式只是上下移动，但我认为它达到了预期的效果。你可以使用参数(方向、时间、距离，以及上面未命名的“1000”)来调整形式移动。
在你的DIV中，CSS-hide光标使用cursor:none; 创建一个。png光标图像，并使用鼠标移动的jQ移动它(左，上) 使用setTimeout随机化。png的margin-left和margin-top (使重新定位平滑使用CSS3过渡或做它与jQ .animate())。
注意:脚本不能知道手是否仍然在鼠标上;)
function rand(min, max) {return Math.random() * (max - min) + min;} var $cursor = $('div img'); $('div').mousemove(function(e) { // Make .png follow the mouse coordinates $cursor.css({ left: e.pageX, top:e.pageY }); }).hover(function(e){ $cursor.toggle(); // Show .png cursor as we enter the DIV }); (function tremor(){ // Add tremor to .png image $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>
