jQuery渐隐渐出的文字提示

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

 

你可能感兴趣的:(jquery)