======獲取當前鼠標的位置========
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 不應該用body(要有內容才行) 應該用document文檔對象
$("body").mousemove(function (e) {
$("#mousePosition").text("橫座標是：" + e.pageX + " " + "縱座標是：" + e.pageY);
});
// 正確獲取鼠標位置
$(document).mousemove(function (e) {
$("#mousePosition").text("橫座標是：" + e.pageX + " " + "縱座標是：" + e.pageY);
});
});
</script>
</head>
<body>
<div id="mousePosition">hahahahah</div>
</body>
</html>
=====圖片跟隨鼠標移動========
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
var pX = e.pageX;
var pY = e.pageY;
// 以document文檔對象爲參考位置即（0,0）位置爲參考
$("#img").css({ "position": "absolute", "left": pX, "top": pY, "width": "200px" });
});
});
</script>
</head>
<body>
<img id="img" src="../Images/5.jpg">
</body>
</html>
======產生提示效果======
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#toolDiv{margin-left:100px;}
#toolDiv a{display:block;width:50px;height:50px;background:lightgreen;}
.Tips{width:150px;height:25px;border:1px solid orange;position:absolute;}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 產生提示效果
$("#toolDiv a").hover(function (e) {
// 鼠標停在上面時發生 添加層
var pX = e.pageX;
var pY = e.pageY;
var $div = $("<div id='toolTips'>詳細信息</div>").attr("class", "Tips").css({ "top": pY, "left": pX });
$("body").append($div);
}, function () {
// 鼠標離開時發生 移除層
var $div = $("#toolTips");
if ($div) {
$div.remove();
}
});
});
</script>
</head>
<body>
<div id="toolDiv">
<a href="http://www.baidu.com" >baidu</a><br /><br /><br /><br />
<a href="http://www.nj.com">sina</a><br /><br /><br /><br />
<a href="http://www.csdn.net">CSDN</a><br /><br /><br /><br />
<a href="http://www.51job.com">51Job</a><br /><br /><br /><br />
<a href="http://www.51aspx.com">51aspx</a><br /><br /><br /><br />
</div>
</body>
</html>
==========產生提示效果並且在彈出的層中進行操作=========
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#toolDiv{margin-left:100px;}
#toolDiv a{display:block;width:50px;height:50px;background:lightgreen;}
.Tips{width:190px;border:1px solid orange;position:absolute;}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#toolDiv a").mouseover(function (e) {
// 鼠標停在上面時發生 添加層
var pX = e.pageX;
var pY = e.pageY;
var $div = $("<div id='toolTips'>要想查看更多 請點擊 <span id='closeDiv' style='font-size:10px;color:red;cursor:pointer;'>關閉</span><br /><a href='http://www.baidu.com'>瞭解更多</a></div>").attr("class", "Tips").css({ "top": pY, "left": pX });
// 判斷是否已經添加
if ($("#toolTips").length > 0) {
} else {
$("body").append($div);
};
// 關閉DIV
$("#closeDiv").click(function () {
var $div = $("#toolTips");
$div.remove();
});
});
});
</script>
</head>
<body>
<div id="toolDiv">
<a href="http://www.baidu.com" >baidu</a><br /><br /><br /><br />
<a href="http://www.nj.com">sina</a><br /><br /><br /><br />
<a href="http://www.csdn.net">CSDN</a><br /><br /><br /><br />
<a href="http://www.51job.com">51Job</a><br /><br /><br /><br />
<a href="http://www.51aspx.com">51aspx</a><br /><br /><br /><br />
</div>
</body>
</html>