Question

试图查看Stack Overflow和Google的解决方案，但无法找到。

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

我不想看起来粗鲁，粗鲁或卑鄙，但我想模拟帕金森病或关节炎病人试图在网页上移动鼠标。

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

我没有任何起始代码，如果这对你们任何人来说都是一个麻烦，那么道歉，但我现在感激任何帮助。

先谢谢你们，如果有解决方案，我很确定我会在这里找到它！

更新 - 我只是在寻找一个浏览器解决方案，最大的浏览器兼容性是值得赞赏再次感谢

Answer 1

在DIV中，CSS使用cursor:none;
创建.png光标图像并使用left

top

mousemove

使用margin-left随机化.png margin-top和setTimeout （使重新定位顺利使用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>

使用HTML或JS / jQuery扭曲光标移动

1 个答案: