学到插件 自己也倒弄出来一个。
效果图如下：
代码如下：
<!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>
<title>无标题页</title>
<style type="text/css">
#conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;}
</style>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<span class="ll" title="123">你好</span>
<a title="123" href="#">四大发送</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" class="ll" href="#">1的爽肤水</a>
<a title="123" href="#">1撒旦法1</a>
<a title="123" href="#">12撒旦法1</a><a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" href="#">12331</a>
<a title="123" class="ll" href="#">12331</a>
<div></div>
<script language="javascript" type="text/javascript">
$(function(){
//插件主题
$.fn.extend({
showTitle:function(){
$('<div id="conBox"></div>').appendTo('body');
var d=$("#conBox");
this.bind({
mouseover:function(){
if(!$("#conBox")){
$('<div id="conBox"></div>').appendTo('body');
}else{
d=$("#conBox");
}
var of=$(this).offset();
var title=$(this).attr("title");
//定义位置
d.css({top:of.top+$(this).height()+"px",left:$(this).width()/2+of.left+"px"}).text($(this).attr("title"));
//显示
d.fadeIn();
},
mouseout:function(){
//鼠标一走隐藏
d.fadeOut();
}
});
}
});
//调用
$(".ll").showTitle();
});
</script>
</body>
</html>