码迷,mamicode.com
首页 > 编程语言 > 详细

javascript模拟title提示效果

时间:2015-07-20 18:43:03      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

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

  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提示效果

标签:

原文地址:http://www.cnblogs.com/shizhouyu/p/4661783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!