<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>