javascript模拟title提示效果
本代码可以实现如下情况:
1、js实现title是为了解决自定义样式和格式!
2、希望传入的格式可以不限制是否包含html结构!
3、可以自定义显示层的位置!
js如下:
function GetAbsoluteLocation(element)
{
if ( arguments.length != 1 || element == null )
{
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent )
{
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}
function cerateDiv(array,obj){
var pos = GetAbsoluteLocation(obj);
var temp = '';
temp +='<div id="hover_tip_toolTip" style="border-top:1px solid #e20f10;border-left:1px solid #e20f10;border-right:1px solid #e20f10;background:#11161b;width:148px;height:auto;position:absolute;left:'+ (pos.absoluteLeft+pos.offsetWidth+5) +'px'+';top:'+ pos.absoluteTop +'px;">'
temp += array;
temp += '</div>';
$('body').append(temp);
obj.onmouseout = function(){
$('#hover_tip_toolTip').remove();
}
}
使用方式:
<a href="javascript:;" class="evt_comon_icon evicon11 block" onmouseover="cerateDiv('<p>名称:计都</p><p>触发条件:每施放一个技能(普通攻击除外)</p><p>技能效果:触发BUFF,持续数秒,叠加至一定层数后,伤害提高,持续数秒,触发一次</p>',this)"></a>
javascript模拟title提示效果的更多相关文章
- 模拟title提示!
转载http://wouit.com/post/2013-08-15/40052169981html <a href="#" tishi="常见的网页新闻循环跳动显 ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- javascript模拟html title
这只是个学习原生javascript过程中的一个练手效果 不做说明解释 直接上代码 算是个参考 <!doctype html> <html> <head> < ...
- JavaScript函数实现鼠标指向后带图片的提示效果
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...
- 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)
JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- 利用HTML5云存储实现模拟对比投票效果
<!DOCTYPE HTML> <html> <head> <title>模拟对比投票效果</title> <meta name=&q ...
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...
随机推荐
- linux下各种文件格式的压缩以及解压缩命令
From : http://blog.csdn.net/mu0206mu/article/details/17732857 -------------------------------------- ...
- .NET反编译之Reflector基础示例
这几日由于公司需要, 看了些.NET反编译技巧,特地和大家分享下 .NET反编译工具很多,Reflector是其中一个很优秀的工具,所以就用它来进行反编译工作了.今天我们就用"繁星代码生成器 ...
- NSIS常用代码整理
原文 NSIS常用代码整理 这是一些常用的NSIS代码,少轻狂特意整理出来,方便大家随时查看使用.不定期更新哦~~~ 1 ;获取操作系统盘符 2 ReadEnvStr $R0 SYSTEMDRIVE ...
- WP8加入自己定义铃声
1.下载千千静听绿色版,下载地址:http://pan.baidu.com/s/1ntuSNOH 2.将目标铃声加入到千千静听,选中铃声,右键选文件属性. 3.改动文件属性,将流派改为"Ri ...
- VB.NET与C# 语法show差异
学习VB.NET后发现,VB.NET与C#的语法基本的不同在两个部分,这两部分搞通了,那就游刃有余,迎刃而解了. 现将其对照总结例如以下: 一.实体部分 (与VB相比.在C#和VB.NET中,实体的使 ...
- js中位运算的运用
原文:js中位运算的运用 我们可能很少在编程中用位运算,如果没深入学习,可能也很难理解.平时的数值运算,其实是要先转换成二进制再进行运算的,而位运算就是直接进行二进制运算,所以位运算的执行效率肯定是更 ...
- 基础总结篇之五:BroadcastReceiver应用具体解释
問渠那得清如許?為有源頭活水來.南宋.朱熹<觀書有感> 据说程序猿是最爱学习的群体,IT男都知道,这个行业日新月异,必须不断地学习新知识,不断地为自己注入新奇的血液,才干使自己跟上技术的步 ...
- Java初认识--函数和数组
一.函数 1.函数的定义 函数就是定义在类中的具有特定功能的一段独立小程序,函数也称为方法. java中最小的功能单元就是函数. 2.函数的格式 修饰符 返回值类型 函数名(参数类型 形式参数1,参数 ...
- sql server 视图 的一个例子
这是一个 有点复杂的查询.我现在 想把他封装 成 视图 其中 B.RecordID= 41 提供给 视图外查询. create view view_UserRecord as select Rec ...
- 搭建及修正Hadoop1.2.1 MapReduce Pipes C++开发环境
Hadoop目前人气超旺,返璞归真的KV理念让人们再一次换一个角度来冷静思考一些问题. 但随着近些年来写C/C++的人越来越少,网上和官方WIKI的教程直接落地的成功率却不高,多少会碰到这样那样的问题 ...