jquery 简单的title显示插件

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

效果图如下：

代码如下：

无标题页

#conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;}

你好
四大发送
12331
12331
12331
12331
1的爽肤水
1撒旦法1
12撒旦法112331
12331
12331
12331

$(function(){
//插件主题
$.fn.extend({
showTitle:function(){
$('

').appendTo('body');
var d=$("#conBox");
this.bind({
mouseover:function(){
if(!$("#conBox")){
$('

').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();
});

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

赞 (0)

相关推荐

  • Jquery修改页面标题title其它JS失效的解决方法

    Jquery代码 复制代码 代码如下: $("title").html("hello"); 后来只好用下面这段js代码来实现 Js代码 复制代码 代码如下: document.title="hello";

  • 用jquery模仿的a的title属性的例子

    用jquery模仿的a的title属性的例子

    用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了. html代码如下: <div class="wrap"> <ul class="list clearfix"> <li><a href="">UI设计师</a> <div class="show"> <p>所属部门:技术部</p&g

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • 用jquery模仿的a的title属性(兼容ie6/7)

    用jquery模仿的a的title属性(兼容ie6/7)

    用jQuery实现的模仿a的title属性的例子,在测试的时候ie6,7上出现了层次混乱,不过最终解决了. html代码如下: 复制代码 代码如下: <div class="wrap"> <ul class="list clearfix"> <li><a href="">UI设计师</a> <div class="show"> <p>所属部门:

  • niceTitle 基于jquery的超链接提示插件

    niceTitle 基于jquery的超链接提示插件

    这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览. 效果图如下,自己可以相应修改 代码如下: 复制代码 代码如下: <link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> <script type="text/javascript" src=&q

  • 以WordPress为例讲解jQuery美化页面Title的方法

    这里选取的例子,便是 WordPress 中比较有名的美化超链接Title效果,一般的 title 效果是把鼠标放到 a 元素中便会显示一个黄底色框,而且是延时显示,这样显然不是一个好的 UE ,所以美化的 Title 便诞生了,在本站现在的主题 Line 的侧边栏中把鼠标放到文章标题便显示文章摘要的功能便是使用美化 Title 的原理做的,之所以选取这个例子,一是该例子中很好的体现了 jQuery 中的 DOM 操作,二是美化 Title 在 WordPress 中比较常用,可以供需要做美化

  • jquery鼠标滑过提示title具体实现代码

    jquery鼠标滑过提示title具体实现代码

    复制代码 代码如下: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function(){     var x=20;     var y=0;     $("

  • 基于jQuery的为attr添加id title等效果的实现代码

    核心代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ //$('div.chapter a').attr({'rel':'external'}); $('div.chapter a').each(function(index){ var $linkthis=$(this) $linkthis.attr({ '

  • jquery 简单的title显示插件

    jquery 简单的title显示插件

    学到插件 自己也倒弄出来一个. 效果图如下: 代码如下: 无标题页 #conBox{ position:absolute; width:200px;padding:5px;display:none;background:#666;z-index:999;border-radius:5px;} 你好 四大发送 12331 12331 12331 12331 1的爽肤水 1撒旦法1 12撒旦法112331 12331 12331 12331 $(function(){ //插件主题 $.fn.ext

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • 基于jQuery实现网页进度显示插件

    基于jQuery实现网页进度显示插件

    相信大家都见过类似的网站功能,这种形式的进度显示可以很方便的让用户去理解和操作, 以下是插件的测试截图 ,提供了两个皮肤 使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示 1.简单的调用 //所有步骤的数据 var stepListJson=[{StepNum:1,StepText:"第一步"}, {StepNum:2,StepText:"第二步"}, {StepNum:3,StepText:"第三步"}, {StepNum:

  • jQuery简单操作cookie的插件实例

    本文实例讲述了jQuery操作cookie的插件.分享给大家供大家参考,具体如下: jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var e

  • jquery简单插件制作(fn.extend)完整实例

    本文实例讲述了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" xml:lang=&qu

  • jQuery简单自定义图片轮播插件及用法示例

    jQuery简单自定义图片轮播插件及用法示例

    本文实例讲述了jQuery简单自定义图片轮播插件及用法.分享给大家供大家参考,具体如下: 经常使用别人的插件,现在自己写一个,纪念一下. jQuery.banner.js: /* * banner 0.1 * 使用banner 实现图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(function($){ $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeigh

  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    jQuery判断元素是否显示 是否隐藏的简单实现代码 var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 if(!node.is(':visible')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visib

  • 基于jQuery的投票系统显示结果插件

    基于jQuery的投票系统显示结果插件

    首先还是来看一下运行效果如图1所示. 该插件使用步骤 一.引入css文件 首先页面引入css样式文件'votecss.css',他是投票结果正常显示必不可少的.具体代码如下所示: <link href="startpic/votecss.css" rel="stylesheet" type="text/css" /> 二.引入jQuery的就是源文件 该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下: <

  • jQuery Collapse1.1.0折叠插件简单使用

    本文实例为大家分享了jQuery Collapse1.1.0折叠插件的使用,供大家参考,具体内容如下 /*! * jQuery collapse - A Wizard Plugin - http://www.cnblogs.com/yeyuansheng/ * ------------------------------------------------------------------------------------ * * @version 1.1.0 * @since 2017.0

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

随机推荐