jQuery渐隐渐出的文字提示

最新推荐文章于 2021-04-17 20:30:54 发布

a245090971

最新推荐文章于 2021-04-17 20:30:54 发布

阅读量226

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Tinoloving/p/4682797.html

版权

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