<html>
<head>
<title>jquery渐隐渐出的文字提示</title>
<style type="text/css">
#preview{border:1px solid #999;background:#9900CC;color:#fff;padding:5px;display:none;position:absolute;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.4.1.js"></script>
</head>
<body>
如果加载时有错误，请刷新一下页面，在真正应用中不会有此现象发生。<br/><br/><br/>
<a class="preview">请把鼠标放这里查看效果！</a>
<script type="text/javascript">
this.imagePreview = function () {
xOffset = 10;
yOffset = 30;
$("a.preview").hover(function (e) {
$("body").append("<div id='preview'>这个提示是由jquery完成的哦，很不错吧？</div>");
$("#preview")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function () {
$("#preview").fadeOut("fast");
});
$("a.preview").mousemove(function (e) {
$("#preview")
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px");
});
};
$(document).ready(function () {
imagePreview();
});
</script>
</body>
</html>
