软件开发培训班 >> 编程开发 >> JavaScript

jquery 简单的title显示插件

　　本文标签：jquery,title显示

<!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>

技术文章快速查找

一个级联菜单代码学习及removeClass与addClass的应用

Javascript动态绑定事件的简单实现代码

使用 JScript 创建 .exe 或 .dll 文件的方法

关于JavaScript中var声明变量作用域的推断

JavaScript初学者需要了解10个小技巧

简单常用的幻灯片播放实现代码

javascript实现的距离现在多长时间后的一个格式化的日期

js实现页面跳转重定向的几种方式

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建