jQuery實現(xiàn)獲取當前鼠標位置并輸出功能示例

2019-11-19 12:19:20

字體：大中小

供稿：網(wǎng)友

本文實例講述了jQuery實現(xiàn)獲取當前鼠標位置并輸出功能。分享給大家供大家參考，具體如下：

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.survivalescaperooms.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>

效果：