简介：今天扣丁学堂HTML5培训老师给大家结合实例讲述了jQuery实现获取当前鼠标位置并输出功能，下面我们一起来看一下吧。jQuery获取当前鼠标位置并输出 1、htmlbody onmousemove="mousemove(event)"/body2、csshtml,b ...
|
<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、jsvar 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>以上就是关于扣丁学堂HTML5培训之jQuery实现获取当前鼠标位置并输出功能示例的详细介绍，希望对同学们学习HTML5开发有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。【关注微信公众号获取更多学习资料】 本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yx10011.com学习互联网营销技术请到巅云建站www.yx10011.com。 |
