jquery 简单的title显示插件

时间：2021-04-24 09:25:55|栏目：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需再刷新一下页面才能执行]

上一篇：利用javascript/jquery对上传文件格式过滤的方法

栏目：jquery

下一篇：jQuery中DOM树操作之使用反向插入方法实例分析

本文标题：jquery 简单的title显示插件

本文地址：http://www.codeinn.net/misctech/107505.html

更多jquery

jquery

jquery 简单的title显示插件

阅读排行

推荐教程