1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > jquery 手型 鼠标穿过时_JS实现的鼠标跟随代码(卡通手型点击效果)

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

时间:2018-10-17 13:54:42

相关推荐

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

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

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

运行效果截图如下:

在线演示地址如下:

/js//js-handle-style-focus-codes/

具体代码如下:

/p>

"/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程序设计有所帮助。

时间: -10-23

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。