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实现图片上传前本地预览
Apr 28 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
使用jquery实现轮播图效果
Jan 02 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 应用容器化以及部署方法
2018/02/12 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
js 原型对象和原型链理解
2017/02/09 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
在Python的Django框架中加载模版的方法
2015/07/16 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
django 自定义过滤器的实现
2019/02/26 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
详解python itertools功能
2020/02/07 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
妇产科护士自我鉴定
2013/10/15 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
简历上的自我评价
2014/02/03 职场文书
《假如》教学反思
2014/04/17 职场文书
求职教师自荐书
2014/06/19 职场文书
学校安全管理责任书
2014/07/23 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
庭外和解协议书
2016/03/23 职场文书
Python使用永中文档转换服务
2022/05/06 Python