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

2019-11-19 12:19:20

字体：大中小

来源：转载

供稿：网友

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

效果：