700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > php 鼠标 移动 手型 JS实现的鼠标跟随代码(卡通手型点击效果)

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

时间:2018-10-04 17:49:41

相关推荐

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

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

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

运行效果截图如下:

在线演示地址如下:

具体代码如下:/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程序设计有所帮助,更多相关教程请访问JavaScript视频教程!

本文转载于:脚本之家,如有侵犯,请联系a@删除

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