Js鼠标跟随代码小手点击实例方法

更新时间：2013年05月21日 10:09:11 作者：

一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，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='https://www.jb51.net/jscss/demoimg/201305/cursor_hover.png' />";     return false;   }   document.onmouseup = function(){    oCursor.innerHTML = "<img src='https://www.jb51.net/jscss/demoimg/201305/cursor.png' />";    }  }; }</script></head><body><div id="cursor"><img src="https://www.jb51.net/jscss/demoimg/201305/cursor.png" /></div><input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('https://www.jb51.net')" /></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

10种JavaScript最常见的错误(小结)
这篇文章主要介绍了10种JavaScript最常见的错误(小结)，查看了数千个项目后，发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生
2019-06-06
Echarts图表位置调整的图文教程
实际过程中你会发现图表在div中的位置不太理想,这时怎么去调整呢?下面这篇文章主要给大家介绍了关于Echarts图表位置调整的相关资料,需要的朋友可以参考下
2022-10-10
BootstrapVue选项卡标题增加关闭按钮的方法
这篇文章主要为大家详细介绍了BootstrapVue选项卡标题增加关闭按钮的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
两个函数相互调用如何防止死循环
这篇文章主要介绍了两个函数相互调用如何防止死循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
html5+javascript实现简单上传的注意细节
这篇文章主要为大家详细介绍了html5+javascript实现上传操作的注意细节，form表单样式不美观等细节问题，感兴趣的小伙伴们可以参考一下
2016-04-04
layui之table checkbox初始化时选中对应选项的方法
今天小编就为大家分享一篇layui之table checkbox初始化时选中对应选项的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript CSS画图之基础篇
要在浏览器上动态地画图（矢量图），个人觉得矢量图中最关键的两点.
2009-07-07
JS+CSS实现的竖向简洁折叠菜单效果代码
这篇文章主要介绍了JS+CSS实现的竖向简洁折叠菜单效果代码,涉及JavaScript链式操作与元素遍历等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
JS document文档的简单操作完整示例
这篇文章主要介绍了JS document文档的简单操作,结合完整实例形式详细分析了JavaScript document文档元素添加、删除、获取、创建等相关操作技巧与使用注意事项,需要的朋友可以参考下
2020-01-01
手把手教你uniapp和uview2.0实现表单校验实战
表单提交对大家来说应该都不陌生,这是个很常见的功能,这篇文章主要给大家介绍了关于手把手教你uniapp和uview2.0实现表单校验的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05

Js鼠标跟随代码小手点击实例方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具