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

本文实例讲述了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>www.jb51.net 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>

效果：

（提示：可以在creatDiv方法里面酌情加入想要的偏移量）

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

在线HTML/CSS/JavaScript代码运行工具:
http://tools.jb51.net/code/HtmlJsRun

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • 为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能

    复制代码 代码如下: $("#dialog").dialog({ bgiframe: true, autoOpen: false, position: [PosX, PosY], //alert 出来为:" , "(不含双引号),或者报错,不知什么原因. height: 300, modal: true, buttons: { '创建新账号': function() { var bValid = true; allFields.removeClass('ui-sta

  • jQuery获得指定元素坐标的方法

    本文实例讲述了jQuery获得指定元素坐标的方法.分享给大家供大家参考.具体分析如下: var left = $("#div").offset().left; //div相当于窗口的左边的偏移量 var top = $("#div").offset().top; //相当于窗口的顶部的偏移量 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery实时显示鼠标指针位置和键盘ASCII码

    jQuery实时显示鼠标指针位置和键盘ASCII码

    本文通过jquery技术实现鼠标指针位置和键盘ASCII码,代码简单易懂,具体内容请看下文吧. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-2.1.4.js"></scr

  • jquery中获得元素尺寸和坐标的方法整理

    一.获得坐标 1.offset() offset() 方法返回或设置匹配元素相对于文档的偏移(位置).(即视口坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 2.position() position() 方法返回匹配元素相对于父元素的位置(偏移).(相对于父元素的文档坐标) 该方法返回的对象包含两个整型属性:top 和 left,以像素计. 此方法只对可见元素有效. 3.offsetParent() offsetParent() 方法返回最

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • Js和JQuery获取鼠标指针坐标的实现代码分享

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <ti

  • JQuery 获得绝对,相对位置的坐标方法

    var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

  • jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置

    此控件是基于Jquery开发的,要引用Jquery框架 控件代码 复制代码 代码如下: $.fn.myNudge = function() { var self = $(this); self.css({ position: "absolute" }); //让这个元素绝对定位 var selfLeft = self.css("left"); var selfTop = self.css("top"); self.css({ left: self

  • jQuery实现获取table中鼠标click点击位置行号与列号的方法

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 鼠标点击位置行列号</title> </head> <bo

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

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

    本文实例讲述了jQuery实现获取当前鼠标位置并输出功能.分享给大家供大家参考,具体如下: jQuery获取当前鼠标位置并输出 1.html <body onmousemove="mousemove(event)"></body> 2.css html, body { width: 100%; height: 100%; background: #A5CEDB; position: relative; } .newDiv { position: absolute

  • vue实现组件跟随鼠标位置弹出效果(示例代码)

    vue实现组件跟随鼠标位置弹出效果(示例代码)

    实现鼠标放置在“我的”上时出现卡片,卡片位置跟随鼠标.当鼠标移除卡片时卡片隐藏.当鼠标移入时获取鼠标坐标,并把父组件的鼠标位置通过prop传给子组件. toCenter(event){ const{x,y}=event this.mouse_x=x; this.mouse_y=y; this.showCenter=true; }, 子组件通过动态绑定style改变div坐标. 注意!!! 一开始没用watch,而是在data里直接修改,如上所示.这样会出现刷新以后data获取不到prop中的属性

  • jQuery实现动态加载select下拉列表项功能示例

    本文实例讲述了jQuery实现动态加载select下拉列表项功能.分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码部分: 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> &

  • jQuery实现倒计时重新发送短信验证码功能示例

    本文实例讲述了jQuery实现倒计时重新发送短信验证码功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var countdown

  • jQuery实现动态添加节点与遍历节点功能示例

    本文实例讲述了jQuery实现动态添加节点与遍历节点功能.分享给大家供大家参考,具体如下: 动态添加节点: <!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&quo

  • jQuery+vue.js实现的多选下拉列表功能示例

    jQuery+vue.js实现的多选下拉列表功能示例

    本文实例讲述了jQuery+vue.js实现的多选下拉列表功能.分享给大家供大家参考,具体如下: 其实就是实现一个多选下拉列表,然后将选中的选项显示到相应的位置: 因为主要是jQuery选中行为的实现,所以,样式结构就不多说啦,直接贴代码啦: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

  • jQuery+ajax实现动态添加表格tr td功能示例

    本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: <table> <tbody></tbody> </table> ajax部分: var year = $('#year').val();//下拉框数据 var province= $('#province').val();//下拉框数据 $('table tbody').html

  • jQuery实现注册会员时密码强度提示信息功能示例

    jQuery实现注册会员时密码强度提示信息功能示例

    本文实例讲述了jQuery实现注册会员时密码强度提示信息功能.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>

  • thinkPHP+phpexcel实现excel报表输出功能示例

    thinkPHP+phpexcel实现excel报表输出功能示例

    本文实例讲述了thinkPHP+phpexcel实现excel报表输出功能.分享给大家供大家参考,具体如下: 准备工作: 1.下载phpexcel1.7.6类包: 2.解压至TP框架的ThinkPHP\Vendor目录下,改类包文件夹名为PHPExcel176,目录结构如下图: 编写代码(以一个订单汇总数据为例): 1. 创建数据库及表;   2. 创建tp项目,配置项目的数据库连接,这些基本的就不说了:   3. 在项目的Lib\Action下创建一个新的类文件ExportStatistics

  • Python实现字符串逆序输出功能示例

    本文实例讲述了Python实现字符串逆序输出功能.分享给大家供大家参考,具体如下: 1.有时候我们可能想让字符串倒序输出,下面给出几种方法 方法一:通过索引的方法 >>> strA = "abcdegfgijlk" >>> strA[::-1] 'kljigfgedcba' 方法二:借组列表进行翻转 #coding=utf-8 strA = raw_input("请输入需要翻转的字符串:") order = [] for i in

随机推荐