jquery仿title跟随鼠标提示效果
     2016-4-15    +0°    751  

在许多网站都能看到在有title标签的地方,鼠标经过都会很快的的出现一个美观的提示框,显示着title标签的内容。现在教大家怎么实现这一功能:

在主题的header.php的适当位置加入以下代码:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
                var x=10;
                var y=20;
        $("a").mouseover(function(e){
                //alert(e.pageX);
                if(typeof($(this).attr('title'))!='undefined'){ // 判断标签中是否有定义title属性
                this.my_tit=this.title;
                this.title='';
                var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";
                $("body").append(tooltip);
                $(".tooltip").css({
                        display:'block',
                        left: e.pageX+x,
                        top: e.pageY+y
                        })
                    };
            }).mouseout(function(){
                if(typeof($(this).attr('title'))!='undefined'){
                this.title=this.my_tit;
                $(".tooltip").remove();
                    };
                }).mousemove(function(e){// 鼠标移动时跟随
                    $(".tooltip").css({
                            left: e.pageX+x,
                            top: e.pageY+y
                        })
                    })
});
</script>

 
第一个js是加载jQ库,带二段代码,是判断标签中是否有title属性,有的话就显示提示框,提示框的class属性为tooltip。这样可以自定义它的CSS样式。

本站的样式参考:

/*鼠标跟随显示title*/
.tooltip{
    position:absolute;
    display:none;
    border-radius:3px;
    background:rgba(0,0,0,0.6);
    padding:3px 6px;
    color:#fff;
    display:none;
}

 
样式可以直接添加到style.css样式表中!