• 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;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>
  • 相关阅读:
    Grid自动添加行
    C#中Trim()、TrimStart()、TrimEnd()的用法
    input事件
    JS判断元素文本值是否为空
    JS转换Date日期格式
    Bootstrap 内联标签和徽章
    each()详解
    highcharts图表属性
    Highcharts去掉一些小图标
    div怎么在底部设计一个倒三角形
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/4661783.html
Copyright © 2020-2023  润新知