本代码可以实现如下情况:

  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提示效果的更多相关文章

  1. 模拟title提示!

    转载http://wouit.com/post/2013-08-15/40052169981html <a href="#" tishi="常见的网页新闻循环跳动显 ...

  2. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  3. javascript模拟html title

    这只是个学习原生javascript过程中的一个练手效果 不做说明解释 直接上代码 算是个参考 <!doctype html> <html> <head> < ...

  4. JavaScript函数实现鼠标指向后带图片的提示效果

    转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...

  5. 项目总结15:JavaScript模拟表单提交(实现window.location.href-POST提交数据效果)

    JavaScript模拟表单提交(实现window.location.href-POST提交数据效果) 前沿 1-在具体项目开发中,用window.location.href方法下载文件,因windo ...

  6. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  7. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  8. 利用HTML5云存储实现模拟对比投票效果

    <!DOCTYPE HTML> <html> <head> <title>模拟对比投票效果</title> <meta name=&q ...

  9. BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

随机推荐

  1. FastJson基本使用

    在发展中Android的过程中.假设我们常与server联系,更新数据等,然后,json它必须是一个良好的数据格公式,但随着json.使用原生的解析也能够,可是非常不高效,所以这里介绍两种json数据 ...

  2. Android WebView坑摘要

    要抓好近期iPad HybridApp至Android举,坑遇到太多.让我折腾过Android临近4在退伍军人头痛! 今天前者被列出,以满足,然后慢慢自己解决.现在,它已经解决android键盘覆盖问 ...

  3. WinDbg调试.NET

    WinDbg调试.NET程序入门 俗话说:万事开头难! 自从来到新公司遇到性能问题后,需要想办法解决这个问题,但是一直没有合适的性能分析工具,然后找到StevenChennet 大神帮忙,他用WinD ...

  4. Linux 编程学习笔记----文档管理系统

    本文从网络上完成的第 Linux在文件系统管理. 1.VFS文件系统概述 linux採用VFS来管理文件系统,并且linux设计的原则之中的一个就是everything is file.因此文件管理系 ...

  5. Eclipse Maven构建Spring MVC项目

    工作中项目开发使用Maven管理项目的构建.打包.编译,框架採用的是Spring MVC框架,而且实现了多模块.多项目的管理.自己也简单的參与了架构的设计.对于刚開始学习的人来说,使用Maven构建项 ...

  6. 用脚本安装IIS

    原文:用脚本安装IIS 基本命令:Sysocmgr.exe /i:sysoc.inf /u:c:/iis.txt c:/iis.txt是IIS要安装的组件列表 [Components]iis_comm ...

  7. Android 4.4 KitKat NotificationManagerService使用具体解释与原理分析(一)__使用具体解释

    概况 Android在4.3的版本号中(即API 18)增加了NotificationListenerService,依据SDK的描写叙述(AndroidDeveloper)能够知道,当系统收到新的通 ...

  8. MVC中使用泛型仓储模式和依赖注入

    在ASP.NET MVC中使用泛型仓储模式和依赖注入,实现增删查改 原文链接:http://www.codeproject.com/Articles/838097/CRUD-Operations-Us ...

  9. 使用requirejs实现模块化编程

    > 序言 - -# 公司大了,业务多了,前端代码量也逐渐增大,我们渐渐的依赖js实现的交互越来越多,长期以来会导致我们的代码维护越来越困难,所以依赖的插件也越来越多..比如这样页面中有大量的js ...

  10. Cocos2d-x学习笔记(两)Cocos2d-x总体框架

    原创文章.转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38680123 前言 上一节我们简单分析了HelloWorldproje ...