html中怎么获取当前鼠标左键点击的坐标,jQuery实现获取当前鼠标位置并输出功能示例...

本文实例讲述了jQuery实现获取当前鼠标位置并输出功能。分享给大家供大家参考，具体如下：

jQuery获取当前鼠标位置并输出

1.html

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 = ("

" + x + "," + y + "

");

$("body").append(str);

$(".newDiv").css("left", x + "px").css("top", y + "px");

}

完整示例代码如下：

www.jb51.net 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 = ("

" + x + "," + y + "

");

$("body").append(str);

$(".newDiv").css("left", x + "px").css("top", y + "px");

}

html,

body {

width: 100%;

height: 100%;

background: #A5CEDB;

position: relative;

}

.newDiv {

position: absolute;

background: red;

color: white;

width: 100px;

height: 50px;

}

效果：

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

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

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