jQuery实例: ToolTip的实现

最新推荐文章于 2018-11-16 11:30:00 发布

atpains

最新推荐文章于 2018-11-16 11:30:00 发布

阅读量546

点赞数

分类专栏： JavaScript 文章标签： jquery function button div

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
    $(function(){
      $("[myTip]").hover(function(){
        $('<div id="luluTip"><div class="triangle" /></div>')
        .insertAfter(this)
        .prepend($(this).attr("myTip"));
      $(this).mousemove(function(e){
            ee=e || window.event;
            var x=e.pageX-36;
            if(x-2<0)
                x=2;
            if(x+152>document.body.clientWidth)
                x=document.body.clientWidth-152;
            $("#luluTip").css({"left":x,"top":e.pageY+18,"display":"block"});
      });
        },function(){
            $("#luluTip").fadeOut('slow',function(){
                $(this).remove();
            }); 
    })
});
</script>
<style type="text/css">
    #luluTip
    {
        word-wrap:break-word; /**//*自动换行,在FF中对英文和数字无效*/
        position:absolute;
        width:150px;
        color: #a00;
        background-color:#FFFFCC;
        border:1px solid #a00;
        padding:10px;
        display:none; /**//*我们先不要让它显示*/
    }
    #luluTip div.triangle /**//*后代选择器,选择ID为"luluTip"中DIV的类为"triangle"的元素*/
    {
        background:transparent
            url('sj.gif')
            no-repeat scroll left top;
        position:absolute;
        height:17px;
        left:20px;
        top:-16px;
        width:31px;
        z-index:999;
    }
</style>
</head>
<body>
<input id="btnAjax" name="btnAjax" type="button" value="获取" myTip="sssssss" />
<br/>
<a myTip="这是要显示的内容!" href="#">sssssssssss</a> 
</body>
</html>
 