您的位置：首页 > Web前端 > JQuery

jquery div 跟随鼠标移动

2014-03-25 09:38 489 查看

<!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>
<title></title>
<!--    属性：pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键（1左键，2中键，3右键）。
altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。
keyCode、charCode属性发生时间时的keyCode、charCode。
<script type="text/javascript">
$("a").click(function (e) {
var target = $(e.target);
alert(target.attr("href"));
e.preventDefault();
});
</script>
$(":button").mouseup(function(e) {
if (e.ctrlKey && e.which == 3) {
alert("按下ctrl和鼠标右键！");
}
});-->
<style type="text/css">
#divMouse{position:absolute;width:80px;height:80px;background-color:gold;display:none;}
</style>
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
var xPos = parseInt(e.pageX+12) + "px";
var yPos = e.pageY + "px";
$("#divMouse").css("left", xPos).css("display","block");
$("#divMouse").css("top", yPos);
});
});
</script>
</head>
<body>
<div id="divMouse">
跟着鼠标走
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航