【原】jQuery 实现的自定义提示框

发表于 2010 年 12 月 4 日由 pswzyu

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>测试</title>
    <link rel="stylesheet" href="./css/main.css" type="text/css"></link>
    <style type="text/css">
        #pagex
        {
            border : solid 1px;
            position : relative;
            display : inline;
            overflow : visible;
        }
 
    </style>
    <script type="text/javascript" src="./jq.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(
            function ()
            {
                jQuery("#pagex").mouseover(function (event){
                    jQuery("<div>这里是新的提示内容</div>") // 创建一个新的节点, 用来显示提示内容
                        .css({"border" : "solid 1px", "background" : "yellow",
                            "position": "absolute", "z-index" : "99", "white-space" : "nowrap"}) // 设定css样式
                         .appendTo(jQuery(this)).show("slow"); // 添加到这里, 然后显示
                });
                jQuery("#pagex").mouseout(function (){
                    jQuery(this).find(":last").remove(); // 在鼠标移出时删除提示节点
                });
                jQuery("#pagex").mousemove(function (event){ // 鼠标在节点上移动的事件
                    var this_wrap = jQuery(this);
                    jQuery("#info").html("X : " + (event.pageX - this_wrap.offset().left) // 输出调试信息
                        + "/nY : " + (event.pageY - this_wrap.offset().top));
                    this_wrap.find(":last").css({"left" : event.pageX - this_wrap.offset().left + 10, // 改变提示框的位置, 随鼠标移动
                                                "top" : event.pageY - this_wrap.offset().top + 10});
                });
            }
        );
    </script>
</head>
<body>
    <div id="pagex">
        这是pagex中的文本
    </div>
    <p id="info"></p>
</body>
</html>

此条目发表在 HTML/Javascript/CSS 分类目录。将固定链接加入收藏夹。

发表评论取消回复