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


Posted in Javascript onOctober 26, 2015

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

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

运行效果截图如下:

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery无缝向上滚动实现代码
Mar 29 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
You might like
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
babel基本使用详解
2017/02/17 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python实现的检测网站挂马程序
2014/11/30 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
浅谈Python 函数式编程
2020/06/20 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
一道写SQL的面试题和答案
2013/11/19 面试题
.NET笔试题(20个问题)
2016/02/02 面试题
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年生产部工作总结
2014/12/17 职场文书
采购员工作总结范文
2015/08/12 职场文书