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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 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
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
荷兰超市:DEEN
2018/03/14 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
酒鬼酒广告词
2014/03/21 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
家长给老师的感谢信
2015/01/20 职场文书
新郎婚礼致辞
2015/07/27 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python