jQuery实现获取当前鼠标位置并输出功能示例


Posted in jQuery onJanuary 05, 2019

本文实例讲述了jQuery实现获取当前鼠标位置并输出功能。分享给大家供大家参考,具体如下:

jQuery获取当前鼠标位置并输出

1.html

<body onmousemove="mousemove(event)"></body>

2.css

html,
body {
  width: 100%;
  height: 100%;
  background: #A5CEDB;
  position: relative;
}
.newDiv {
  position: absolute;
  background: red;
  color: white;
  width: 100px;
  height: 50px;
}

3.js

var movex;
var movey; //用来接受鼠标位置的全局变量
function mousemove(e) {
  e = e || window.event;
  if(e.pageX || e.pageY) {
    movex = e.pageX;
    movey = e.pageY
  }
  creatDiv(movex, movey);
}
function creatDiv(x, y) {
  $(".newDiv").remove();
  var str = ("<div class=\'newDiv\'>" + x + "," + y + "</div>");
  $("body").append(str);
  $(".newDiv").css("left", x + "px").css("top", y + "px");
}

完整示例代码如下:

<!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>3water.com js获取当前鼠标位置</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var movex;
var movey; //用来接受鼠标位置的全局变量
function mousemove(e) {
  e = e || window.event;
  if(e.pageX || e.pageY) {
    movex = e.pageX;
    movey = e.pageY
  }
  creatDiv(movex, movey);
}
function creatDiv(x, y) {
  $(".newDiv").remove();
  var str = ("<div class=\'newDiv\'>" + x + "," + y + "</div>");
  $("body").append(str);
  $(".newDiv").css("left", x + "px").css("top", y + "px");
}
</script>
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: #A5CEDB;
  position: relative;
}
.newDiv {
  position: absolute;
  background: red;
  color: white;
  width: 100px;
  height: 50px;
}
</style>
</head>
<body onmousemove="mousemove(event)"></body>
</html>

效果:

jQuery实现获取当前鼠标位置并输出功能示例

(提示:可以在creatDiv方法里面酌情加入想要的偏移量)

PS:感兴趣的朋友可以使用如下工具测试上述代码的运行效果:

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

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

jQuery 相关文章推荐
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery操作之效果详解
May 19 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 #jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 #jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 #jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
You might like
php中文件上传的安全问题
2006/10/09 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
关于Python错误重试方法总结
2021/01/03 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
西班牙在线光学:Visual-Click
2020/06/22 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
信息总监管理职责范本
2014/03/08 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
教师外出学习心得体会
2016/01/18 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Nginx四层负载均衡的配置指南
2021/06/11 Servers
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js