html 手型鼠标-JS实现的键盘跟随代码（q版手型点击效果）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文主要介绍JS实现的键盘跟随代码，带有q版手按效果。 有需要的同学可以参考JavaScript键盘干扰响应及页面元素动态调用方法html 手型鼠标html 手型鼠标，如下：

小手跟随键盘的效果。 键盘移动到哪里，小手就会跟着移动。 手的效果就会出现。 当它放在链接上时，手形会发生变化。 两只手非常帅气。 与大家分享一下JS键盘下面的代码。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

html{ background:#000;}
body,html,input{ cursor:none;}
body,html{ height:100%;}
#cursor{ position:absolute; left:100px; top:100px; display:block;}


 window.onload = function(){
  var oCursor = document.getElementById("cursor");
  document.onmousemove=function (ev){
   var oEvent=ev||event,
    oWidth = document.documentElement.clientWidth,
    oHeight = document.documentElement.clientHeight,
    scrollTop=document.documentElement.scrollTop + oEvent.clientY,
    scrollLeft=document.documentElement.scrollLeft + oEvent.clientX;
   if(scrollTop > oHeight-oCursor.offsetHeight){
    oCursor.style.top = oHeight-oCursor.offsetHeight+'px';
   }else if(scrollTop  oWidth-oCursor.offsetWidth){
    oCursor.style.left = oWidth-oCursor.offsetWidth+'px';
   }else{
    oCursor.style.left = scrollLeft+'px';
   }
   document.onmousedown = function(){
    oCursor.innerHTML = ""; 
    return false;
   }
   document.onmouseup = function(){
    oCursor.innerHTML = ""; 
   }
  };
 }