jQuery,title、仿title功能整理
如图:仿 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功能整理的更多相关文章
- 使用jquery修改标题$("title").html("标题")应注意的问题
使用jquery修改标题$("title").html("标题")应注意的问题: 如果修改后的标题和原标题一致,jquery会跳过该操作,这种情况再从其他页面回 ...
- Jquery实现仿腾讯微薄的广播发表
前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...
- JQuery常用函数及功能
JQuery常用函数及功能小结 来源:http://blog.csdn.net/screensky/article/details/7831000 1.文档加载完成执行函数 $(document).r ...
- 手动实现jQuery Tools里面tab功能
平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...
- 基于jQuery的一个提示功能的实现
最近有点忙,没有时间更新自己的博客,只能说我在原地踏步了,不知道你们进步了没有? 今天给大家分享一个提示的实现,有点简单,适合小白同学学习.下面是效果图 提示的功能: 当鼠标进入“我的菜单”的子菜单时 ...
- jQuery精仿手机上的翻牌效果菜单
代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- js、jquery实现列表模糊搜索功能
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键 ...
- [Mybatis]Mybatis 常用标签及功能整理
Mybatis中生成动态SQL的标签有四类,分别是: if choose (when, otherwise) trim (where, set) foreach 1.if 当需要动态生成where条件 ...
随机推荐
- 安装 Couchbase 服务器
一. 下载安装包 首先,到官网下载安装包:http://www.couchbase.com/ 下载的地址:http://www.couchbase.com/download 选择 Windows 的版 ...
- bzoj1051
就是一个tarjan #include<iostream> #include<stack> #include<cstdio> using namespace std ...
- 用C#制作推箱子小游戏
思路分析: 一.制作一个地图 二.地图中放置墙.箱子.人.目标等 三.让小人动起来完成推箱子动作 游戏制作: 1.按照上述地图制作一个地图 (12行×13列) 地图可以看做是行和列组成的,即可以看做 ...
- dede使用方法----如何转换时间戳
dede用sql调用一个mysql时间,mysql的时间字段是时间戳展示的,突然不知道咋转换了,有点迷茫,结果找了下,发现其实很简单,直接用dede的就行了,如下: 完整时间:[field:datel ...
- bzoj3743: [Coci2015]Kamp
首先树dp求出一个点的答案 然后再一遍dfs换根(是叫做换根吗.. 详见代码 #include <iostream> #include <cstdio> #include &l ...
- 【poj1041】 John's trip
http://poj.org/problem?id=1041 (题目链接) 题意 给出一张无向图,求字典序最小欧拉回路. Solution 这鬼畜的输入是什么心态啊mdzz,这里用vector储存边, ...
- JQuery实现页面刷新滚动条自动滚动到特定位置
var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...
- Microsoft SQL Server,错误: 229 解决方案
今天我在数据库新建一个用户时,碰到了一个奇怪的问题,账号建好了,也指定了该账号上对应的数据库.但是,奇怪的问题出现了,死活不让我新建表,提示如下: 最后,给我找到问题所在了,就是在指定表权限的时候权限 ...
- PHP Datatype Conversion Safety Risk、Floating Point Precision、Operator Security Risk、Safety Coding Principle
catalog . 引言 . PHP operator introduction . 算术运算符 . 赋值运算符 . 位运算符 . 执行运算符 . 递增/递减运算符 . 数组运算符 . 类型运算符 . ...
- Windows8远程桌面CentOS 6.5
概述: 在CentOS上安装vncserver和Windows8上安装VNC Viewer,从而可以在Windows8远程桌面到CentOS 6.5 1. 在CentOS上安装vncserver 1. ...