如图:仿 title="查看"

note="查看",note 可换成其他

样式:

/*重写,标签title层*/
#titleRewrite {position:absolute; z-index:5999; padding:2px 10px; border-radius:3px; color:#fff; background:#5B697B; -webkit-box-shadow: 1px 1px 3px #ccc; -moz-box-shadow: 1px 1px 3px #ccc; box-shadow: 1px 1px 3px #ccc;} JS:
$(function() {
$("[note]").each(function() {
var a = $(this);
var note = a.attr('note');
if (note == undefined || note == "") return;
a.data('note', note)
.removeAttr('note')
.on('mouseover mouseout', function(e) {
if (e.type == 'mouseover'){
var offset = a.offset();
$("<div id=\"titleRewrite\"></div>").appendTo($("body")).html(note).css({ top: offset.top + a.outerHeight(), left: offset.left + a.outerWidth()/2 + 10 }).fadeIn(function () {
setTimeout(function () { $(this).remove(); }, $(this).text().length*800);
});
//console.log('111');
}else {
setTimeout(function (){
$("#titleRewrite").remove();
}, 150);
//console.log('000');
}
});
/*.hover(function (e) {
/!*var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
//$(this).text(xx + '---' + yy);
$("<div id=\"titleRewrite\"></div>").appendTo($("body")).html(title).css({ top: yy + 10, left: xx + 10 }).fadeIn(function () { var pop = $(this);
setTimeout(function (){
pop.remove();
}, pop.text().length*800); }); *!/ var offset = a.offset();
$("<div id=\"titleRewrite\"></div>").appendTo($("body")).html(note).css({ top: offset.top + a.outerHeight(), left: offset.left + a.outerWidth()/2 + 10 }).fadeIn(function () {
setTimeout(function () { $(this).remove(); }, $(this).text().length*800);
}); },function(){
setTimeout(function (){
$("#titleRewrite").remove();
}, 150);
});*/
});
});

jQuery,title、仿title功能整理的更多相关文章

  1. 使用jquery修改标题$("title").html("标题")应注意的问题

    使用jquery修改标题$("title").html("标题")应注意的问题: 如果修改后的标题和原标题一致,jquery会跳过该操作,这种情况再从其他页面回 ...

  2. Jquery实现仿腾讯微薄的广播发表

    前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...

  3. JQuery常用函数及功能

    JQuery常用函数及功能小结 来源:http://blog.csdn.net/screensky/article/details/7831000 1.文档加载完成执行函数 $(document).r ...

  4. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  5. 基于jQuery的一个提示功能的实现

    最近有点忙,没有时间更新自己的博客,只能说我在原地踏步了,不知道你们进步了没有? 今天给大家分享一个提示的实现,有点简单,适合小白同学学习.下面是效果图 提示的功能: 当鼠标进入“我的菜单”的子菜单时 ...

  6. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  7. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  8. js、jquery实现列表模糊搜索功能

    实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...

  9. [Mybatis]Mybatis 常用标签及功能整理

    Mybatis中生成动态SQL的标签有四类,分别是: if choose (when, otherwise) trim (where, set) foreach 1.if 当需要动态生成where条件 ...

随机推荐

  1. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  2. 【转】ListView学习笔记(一)——缓存机制

    要想优化ListView首先要了解它的工作原理,列表的显示需要三个元素:ListView.Adapter.显示的数据: 这里的Adapter就是用到了适配器模式,不管传入的是什么View在ListVi ...

  3. 非编码RNA

    生命的基本过程是从DNA转录成mRNA,再翻译成蛋白质发挥功能.DNA就像一张绝密的密码图,不能随意被移动,只能被锁在细胞核里.要想知道这些密码,只能像复印一样,将密码图复印到mRNA上,由它们把这些 ...

  4. python调用模块&函数

    一般模块是抽象的概念,按照功能划分模块,尽可能保证每个模块互相独立. 一般模块里有多个函数.当然,如果你愿意,也可以把一个几个模块写进一个大函数.对于python 模块,每个模块可以包含多个函数,但一 ...

  5. Java多线程与并发库高级应用-传统线程机制回顾

    1.传统线程机制的回顾 1.1创建线程的两种传统方式 在Thread子类覆盖的run方法中编写运行代码 // 1.使用子类,把代码放到子类的run()中运行 Thread thread = new T ...

  6. 【BZOJ-2007】海拔 最小割 (平面图转对偶图 + 最短路)

    2007: [Noi2010]海拔 Time Limit: 20 Sec  Memory Limit: 552 MBSubmit: 2095  Solved: 1002[Submit][Status] ...

  7. 天气查询SDK

    简介: 这是一个用于查询天气的SDK,在很多时候,尤其是对接多而小功能公众账号的时候,天气查询比较使用,此SDK就是这样的用途,使用的是中国天气网的API,已经集成了网上最靠谱的方式来实现,包括里面的 ...

  8. [NOIP2015] 提高组 洛谷P2680 运输计划

    题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的所有星球. 小 P 掌管一家 ...

  9. 洛谷P1410 子序列

    题目描述 给定一个长度为N(N为偶数)的序列,问能否将其划分为两个长度为N/2的严格递增子序列, 输入输出格式 输入格式: 若干行,每行表示一组数据.对于每组数据,首先输入一个整数N,表示序列的长度. ...

  10. PHP FastCGI RCE Vul

    catalog . Introduction . nginx文件类型错误解析漏洞 . 针对直接公网开放的Fast-CGI攻击 . 通过FCGI API动态修改php.ini中的配置实现RCE 1. I ...