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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery手风琴的简单制作
May 12 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
JQuery复选框全选效果如何实现
May 08 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
pw的一个放后门的方法分析
2007/10/08 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
javascript版2048小游戏
2015/03/18 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python3中的md5加密实例
2018/05/29 Python
学习python可以干什么
2019/02/26 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
幼儿教育感言
2014/02/05 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
小学二年级学生评语
2014/04/21 职场文书
司法助理专业自荐书
2014/06/13 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
医生辞职信范文
2015/03/02 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS