当前位置：Gxlcms > JavaScript > jquery简单的title显示插件_jquery

jquery简单的title显示插件_jquery

时间：2021-07-01 10:21:17 帮助过：6人阅读

学到插件自己也倒弄出来一个。

效果图如下：

代码如下：

<!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> 
四大发送 
12331 
12331 
12331 
12331 
1的爽肤水 
1撒旦法1 
12撒旦法112331 
12331 
12331 
12331 
<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>

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

jquery简单的title显示插件_jquery

人气教程排行