jquery 简单的title显示插件

更新时间：2010年05月31日 19:30:46 作者：

这个代码，针对学习jquery插件制作的朋友可以参考下。效果并不是主要的。

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

效果图如下：

代码如下：

<!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 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点击弹出层弹出模态框点击模态框消失代码分享
这篇文章主要介绍了jQuery点击弹出层，弹出模态框，点击模态框消失的实现代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2017-01-01
基于Jquery实现的一个图片滚动切换
很多效果还是要封装成插件才好，这里只是给大家个效果参考。对像我这种新手应该还是有帮助的吧
2012-06-06
jQuery对JSON数据进行排序输出的方法
这篇文章主要介绍了jQuery对JSON数据进行排序输出的方法,涉及jQuery中getJSON与sort等方法的使用技巧,需要的朋友可以参考下
2015-06-06
Jquery时间验证和转换工具小例子
这篇文章介绍了Jquery时间验证和转换工具小例子，有需要的朋友可以参考一下
2013-07-07
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
这篇文章主要介绍了jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点的相关资料,需要的朋友可以参考下
2015-12-12
jQuery实现Select左右复制移动内容
这篇文章主要介绍了基于jQuery实现Select左右复制移动内容的实现方法，代码非常简单，具有参考借鉴价值，需要的朋友参考下
2016-08-08
jquery的选择器的使用技巧之如何选择input框
如何选择input框，方法貌似有很多，而在jquery中有个相当简单不错的方法，在下面为大家介绍下详细的实现，希望大家可以练练手哦
2013-09-09
jquery比较简洁的软键盘特效实现方法
这篇文章主要介绍了jquery比较简洁的软键盘特效实现方法,实例分析了jQuery实现软键盘特效的具体方法与功能效果,非常具有实用价值,需要的朋友可以参考下
2015-03-03
JQuery为textarea添加maxlength属性并且兼容IE
textarea默认不支持maxlength属性，JQuery为textarea添加maxlength,并且兼容IE，具体实现祥看本文，希望可以帮助到你
2013-04-04
Bootstrop实现多级下拉菜单功能
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文重点给大家介绍bootstrap实现多级下拉菜单功能的实例代码，感兴趣的朋友一起学习吧
2016-11-11