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 1.4 中的Ajax问题
心血来潮下了最新版本的JQuery1.4，写一个页面通过Ajax加载的的例子。
2010-01-01
JQuery+drag.js上传图片并且实现图片拖曳
这篇文章主要介绍了JQuery+drag.js上传图片并且实现图片拖曳,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
这节我们来看下如何实现通过选择RadioButtonList值动态改变hyperlink控件的URL值，并简要介绍bind和live方法的区别
2012-02-02
dul无法加载bootstrap实现unload table/user恢复
这篇文章主要介绍了dul无法加载bootstrap实现unload table/user恢复的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
jquery 插件学习（四）
如果你明白了前面讲的使用jquery.fn对象属性的方法创建jquery对象的方法，那么使用extend()方法创建jquery对象就比较容易理解了。理解了吗，一定要仔细揣摩，仔细研究。我也是再慢慢的学习，慢慢的领悟
2012-08-08
jquery操作 iframe的方法
这篇文章主要介绍了jquery操作 iframe的方法,需要的朋友可以参考下
2014-12-12
30个最佳jQuery Lightbox效果插件分享
Lightbox 应该是最流行的图片浏览效果了，常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。
2011-04-04
vue-preview缩略图报错解决
这篇文章主要为大家介绍了vue-preview缩略图报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
jQuery 顺便学习下CSS选择器奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法，特意找了下这个选择器的用法,在CSS3标准中，用法很强大。
2010-05-05
jquery实现图片上传之前预览的方法
这篇文章主要介绍了jquery实现图片上传之前预览的方法,涉及jquery针对图片及页面元素的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07

jquery 简单的title显示插件

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具