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需再刷新一下页面才能执行]

您可能感兴趣的文章:

理解Javascript_14_函数形式参数与arguments
在'执行模型详解'的'函数执行环境'一节中对arguments有了些许的了解，那么让我们深入的分析一下函数的形式参数与arguments的关系。
2010-10-10
js鼠标滑过图片震动特效的方法
这篇文章主要介绍了js鼠标滑过图片震动特效的方法,涉及onMouseOver事件及图片操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
用Webpack构建Vue项目的实践
这篇文章主要介绍了用Webpack构建Vue项目的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
js拼接html字符串的注意事项
下面小编就为大家带来一篇js拼接html字符串的注意事项。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JavaScript中使用参数个数实现重载功能
这篇文章主要介绍了JavaScript中使用参数个数实现重载功能,需要的朋友可以参考下
2017-09-09
JavaScript的词法结构精华篇
今天小编就为大家分享一篇关于JavaScript的词法结构精华篇，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-10-10
基于JavaScript实现幸运抽奖页面
这篇文章主要为大家详细介绍了基于JavaScript实现幸运抽奖页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-03-03
微信小程序绑定手机号获取验证码功能
这篇文章主要介绍了微信小程序绑定手机号获取验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
在原页面一张图片上添加了一个链接，链接中有中文，于是在跳转过程中出现中文乱码问题，下面给大家分享下解决方案
2016-12-12
JS常见DOM节点操作示例【创建，插入，删除，复制，查找】
这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建，插入，删除，复制，查找等操作相关函数与使用技巧,需要的朋友可以参考下
2018-05-05