jquery 手型 鼠标穿过时_JS实现的鼠标跟随代码(卡通手型点击效果)

本文实例讲述了JS实现带有小手点击效果的鼠标跟随代码。分享给大家供大家参考，具体如下：

一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，JS鼠标跟随代码分享与大家。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-handle-style-focus-codes/

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可爱的鼠标跟随

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.οnmοusemοve=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 < 0){

oCursor.style.top = 0;

}else{

oCursor.style.top = scrollTop+'px';

}

if(scrollLeft > 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 = "";

}

};

}

希望本文所述对大家JavaScript程序设计有所帮助。

时间： 2015-10-23