Js鼠标跟随代码-小手点击

2024-09-05 12:18:38

字体：大中小

来源：转载

供稿：网友

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

<!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='http://www.aspku.com/jscss/demoimg/201305/cursor_hover.png' />";					return false;			}			document.onmouseup = function(){				oCursor.innerHTML = "<img src='http://www.aspku.com/jscss/demoimg/201305/cursor.png' />";				}		};	}</script></head><body><div id="cursor"><img src="http://www.aspku.com/jscss/demoimg/201305/cursor.png" /></div><input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" /></body></html>

上一篇：调用JS的打印方法设置页眉页脚

下一篇：Meta标签实现网页过渡切换代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注