jquery实现标签提示

来源：互联网发布：淘宝开店考试答案编辑：程序博客网时间：2024/06/05 20:00

先看下效果图:
这里写图片描述
贴下代码:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>    <title>提示</title></head><style type="text/css">.tishi{    border:1px dotted #ffffff;    width: 150px;    height: 25px;    font-size: 12px;    background-color: #e06e0c;    line-height:25px;    color: #fffefe;    font-weight: bolder;    text-align:center;    position:absolute;    display:none;}</style><body align="center" style="padding-top:200px;">    <a href="" title="这是第一个标签">这是第一个标签</a><p>    <a href="" title="这是第二个标签">这是第二个标签</a><p>    <a href="" title="这是第三个标签">这是第三个标签</a><p>    <a href="" title="这是第四个标签">这是第四个标签</a><p></body></html><script type="text/javascript">    $(document).ready(function(){            //鼠标移进事件            $("a").mouseover(function(e){                //添加提示款                $("body").append("<div class='tishi'>"+this.title+"</div>");                //设置提示框坐标                $('.tishi').css({                    //第一种方式:鼠标第一次进入位置坐标弹出提示框                    "top": e.pageY + "px",                    "left": e.pageX  + "px"                    /*第二种方式:在要提示的标签右下角弹出提示框                    "top": $(this).offset().top+$(this).height() + "px",                    "left": $(this).offset().left+$(this).width()  + "px"*/                }).show(200);             //鼠标移出事件            }).mouseout(function(){                //移除提示框                $(".tishi").remove();               });    });</script>

代码很简单。就不解释了。

阅读全文

0 0