php鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)

这篇文章主要介绍了JS实现的鼠标跟随代码&＃xff0c;带有卡通手型点击效果。涉及Javascript鼠标事件的响应与页面元素的动态调用技巧&＃xff0c;需要的朋友可以参考下&＃xff0c;具体如下&＃xff1a;

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

运行效果截图如下&＃xff1a;

在线演示地址如下&＃xff1a;

具体代码如下&＃xff1a;/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 &＃61; function(){

var oCursor &＃61; document.getElementById("cursor");

document.οnmοusemοve&＃61;function (ev){

var oEvent&＃61;ev||event,

oWidth &＃61; document.documentElement.clientWidth,

oHeight &＃61; document.documentElement.clientHeight,

scrollTop&＃61;document.documentElement.scrollTop &＃43; oEvent.clientY,

scrollLeft&＃61;document.documentElement.scrollLeft &＃43; oEvent.clientX;

if(scrollTop > oHeight-oCursor.offsetHeight){

oCursor.style.top &＃61; oHeight-oCursor.offsetHeight&＃43;&＃39;px&＃39;;

}else if(scrollTop <0){

oCursor.style.top &＃61; 0;

}else{

oCursor.style.top &＃61; scrollTop&＃43;&＃39;px&＃39;;

}

if(scrollLeft > oWidth-oCursor.offsetWidth){

oCursor.style.left &＃61; oWidth-oCursor.offsetWidth&＃43;&＃39;px&＃39;;

}else{

oCursor.style.left &＃61; scrollLeft&＃43;&＃39;px&＃39;;

}

document.onmousedown &＃61; function(){

oCursor.innerHTML &＃61; "";

return false;

}

document.onmouseup &＃61; function(){

oCursor.innerHTML &＃61; "";

}

};

}

以上就是本章的全部内容&＃xff0c;希望对大家Javascript程序设计有所帮助&＃xff0c;更多相关教程请访问Javascript视频教程&＃xff01;

本文转&＃xff1a;脚本之家&＃xff0c;如有侵犯&＃xff0c;请联系a&＃64;php.cn删除