我为一个基金会工作,该基金会旨在提高人们对互联网无障碍的认识。为了演示,我们想提供一个小型研讨会,模拟不同的残疾/缺陷。这是通过一个专门为这次演示创建的网站来完成的。
其中一个被证实的缺陷是有震颤,这意味着经历颤抖,难以控制的手部运动。由于这种缺陷,当鼠标在链接上时,很难准确地移动鼠标光标并按下鼠标按钮。一些老年人和有疾病的人,如帕金森氏症患者,都可能患有震颤。
现在我想以一种不可预测的方式移动鼠标光标,这样人们就很难点击一个小按钮。因为JavaScript不允许直接移动鼠标光标,所以我正在寻找其他方法来实现这一点。我有以下想法:
使用模拟鼠标晃动的鼠标驱动程序/实用程序。
通过CSS隐藏鼠标光标,在原始光标的位置放置一个晃动的鼠标光标的GIF动画(使用JavaScript),然后让目标链接每隔几秒就可以点击一次,持续一秒钟左右。这至少会给人一种感觉,好像总是在错误的时刻点击。
虽然第一个想法很酷,但我找不到这样的工具,无论是Mac还是Windows。我自己也没有任何编程技能。
第二个想法似乎有点笨拙,但我认为它会达到预期的效果。
有人有别的想法吗?
在你的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>