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

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

框架获取当前鼠标位置并输出

1.html

body onmousemove='mousemove(事件)'/body2.css

html，正文{宽度： 100%；高度： 100%;背景# A5CEDB相对位置：}.newDiv { position:绝对值；背景：红色；颜色：白色；宽度： 100像素；高度： 50px}3.js

var movexvar movey//用来接受鼠标位置的全局变量函数鼠标移动(e){ e=e | |窗口。事件；if(e . PageX | | e . PageY){ movex=e . PageX；movey=e.pageY } creatDiv(movex，movey)；}函数creatDiv(x，y) { $(' .新的DiV ').移除();var str=('div class=\'newDiv\'' x '，' y '/div ')；$(“正文”).追加（字符串);$('.新的DiV ').css(“”左，x 'px ').css('top '，y ' px ')；}完整示例代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www .jb51。net js获取当前鼠标位置/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/脚本var movexvar movey/用来接受鼠标位置的全局变量函数鼠标移动(e){ e=e | |窗口。事件；if(e . PageX | | e . PageY){ movex=e . PageX；movey=e.pageY } creatDiv(movex，movey)；}函数creatDiv(x，y) { $(' .新的DiV ').移除();var str=('div class=\'newDiv\'' x '，' y '/div ')；$(“正文”).追加（字符串);$('.新的DiV ').css(“”左，x 'px ').css('top '，y ' px ')；}/scriptstylehtml，正文{宽度： 100%；高度： 100%;背景# A5CEDB相对位置：}.newDiv { position:绝对值；背景：红色；颜色：白色；宽度： 100像素；高度： 50px}/style/head body on mouse move=' mouse move(事件)'/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中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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