jquery模拟title提示效果

前端APP 投稿 10000 0 评论

jquery模拟title提示效果

当文字字符长度被限制后,总有些长标题会被截断,用title提示虽简单但会造成页面html代码的冗余,这里用jquery做了一个模拟title的提示效果,具体代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的简单文字提示效果</title>
<script src="https://www.feishuai.vip/js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#pt_sfjvip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px;
color:#333;
display:none;
font-size:12px;
}
</style>
<script type="text/javascript">
$(function({
    var x=10,y=20;
    $("a.pt".mouseover(function(e{
        $("body".append("<div id='pt_sfjvip'>"+ this.text+"<\/div>";
        $("#pt_sfjvip".css({"top":(e.pageY+y+"px","left":(e.pageX+x+"px"}.show("fast";
    }.mouseout(function({
        $("#pt_sfjvip".remove(;
    }.mousemove(function(e{
        $("#pt_sfjvip".css({"top":(e.pageY+y+"px","left":(e.pageX+x+"px"};
    };
}
</script>
</head>
<body>
<p><a href="#" class="pt">php cli下接受参数的几种方法</a></p>
</body>
</html>

编程笔记 » jquery模拟title提示效果

赞同 (54) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽