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 26 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
jQuery实现全选按钮
Jan 01 jQuery
jQuery实现影院选座订座效果
Apr 13 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 session应用实例 登录验证
2009/03/16 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python制作爬虫采集小说
2015/10/25 Python
Python iter()函数用法实例分析
2018/03/17 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python的help函数如何使用
2020/06/11 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
2014新年寄语
2014/01/20 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL