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) ...
随机推荐
- TestNg它@Factory详细解释------如何更改参数值测试
原创文章,版权所有所有.转载,归因:http://blog.csdn.net/wanghantong TestNg的@Factory注解从字面意思上来讲就是採用工厂的方法来创建測试数据并配合完毕測试 ...
- C++在设计和使用智能指针
为一个C++用户的.使用指针可以算的上是常态,但在使用过程中.多的时间,可能是由于new要么malloc对象,上次忘记的释放结束(我会犯这样一个错误).内存泄露. 而此时智能指针可能能够帮助我去解决问 ...
- BZOJ 2115 Wc2011 Xor DFS+高斯消元
标题效果:鉴于无向图.右侧的每个边缘,求一个1至n路径,右上路径值XOR和最大 首先,一个XOR并能为一个路径1至n简单的路径和一些简单的XOR和环 我们开始DFS获得随机的1至n简单的路径和绘图环所 ...
- 位运算总结&拾遗
JavaScript 位运算总结&拾遗 最近补充了一些位运算的知识,深感位运算的博大精深,此文作为这个系列的总结篇,在此回顾下所学的位运算知识和应用,同时也补充下前文中没有提到的一些位运算知识 ...
- Eclipse正在使用Ant扑灭Android数据包错误的解决方案 – Perhaps JAVA_HOME does not point to the JDK
问题描写叙述: 在Eclipse中执行ant批量打包工具出错,日志信息例如以下: D:\Android\android-sdk-windows\tools\ant\build.xml:601: The ...
- Sonar相关汇总
http://www.sonarqube.org/downloads/ http://docs.sonarqube.org/display/SONAR/Documentation/ 公司前段时间推动项 ...
- 谈论HashMap,HashSet,HashTableeasy被我们忽视
在正常发育,HashMap,HashTable,HashSet 他们批准了经常使用的按键值地图数据结构.在这里,我主要写一些平时我们使用的这些数据结构easy忽略. HashMap HashMap的结 ...
- 优秀团队建设--美国式团队(ppt)
美国式团队 一.团队精神 团队精神反映一个人的素养.一个人的能力,一个人与别人合作的精神和能力.一个团队是个有机的总体,作为个人,仅仅有全然融入到这个有机总体之中,才干最大限度地体现自己的价值. 团队 ...
- What is WCF
几个博客前,都是关于WCF零散的知识.要了解下下面的宏,什么是WCF? WCF:Windows Communication Foundation(WCF)框架. 1.WCF体系框架 2.框架分析 2. ...
- tortoise svn无法识别subversion check向下代码来解决
使用eclipse小工具subversion check代码后,tortoise svnclient(版本号1.8.8)无法识别,不显示svn图标. 根据每个试验后的线上不实际的解决方案.试过的方法: ...