jquery 简单的title显示插件

时间:2020-05-12 人气: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> 
<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="http://img.jb51.net/jslib/jquery/jquery14.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></div>').appendTo('body'); 
var d=$("#conBox"); 
this.bind({ 
mouseover:function(){ 
if(!$("#conBox")){ 
$('<div></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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容