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 相关文章推荐
JS的replace方法介绍
Oct 20 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
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获取mysql版本的几种方法小结
2008/03/25 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
谈谈python中GUI的选择
2018/03/01 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python常用断言函数实例汇总
2020/11/30 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
村创先争优活动总结
2014/08/28 职场文书
学历证明样本
2015/06/16 职场文书
人生感悟经典句子
2019/08/20 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS