这篇文章主要介绍了js实现的鼠标跟随代码，带有卡通手型点击效果。涉及javascript鼠标事件的响应与页面元素的动态调用技巧，需要的朋友可以参考下，具体如下：
一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，js鼠标跟随代码分享与大家。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-handle-style-focus-codes/
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>可爱的鼠标跟随</title><style>html{ background:#000;}body,html,input{ cursor:none;}body,html{ height:100%;}#cursor{ position:absolute; left:100px; top:100px; display:block;}</style><script> 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 < 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 = "<img src='images/cursor_hover.png' />"; return false; } document.onmouseup = function(){ ocursor.innerhtml = "<img src='images/cursor.png' />"; } }; }</script></head><body><p id="cursor"><img src="images/cursor.png" /></p><input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" /></body></html>
以上就是本章的全部内容，希望对大家javascript程序设计有所帮助，更多相关教程请访问javascript视频教程！