需求

移入a标签
把对应的详情显示出来并且根据位置判断，当前详情是否超出父级可视区
范围，如果超出就定位的距离方向应该正好在父级可视区
范围内

需求分析：

需要用到：

offsetLeft   获取外边框到有定位元素的内边缘

offsetWidth   获取包括border的宽度

offsetHeight    获取包括border的高度

实现思路：

具体的tips内容可以存在json里，以后学了php后用php获取

html里的a，给它加一个自定义属性，如：  attr=‘tf’，主要是用来匹配json

tips面板样式用css做，节点用js生成，a的class为tips，jsfor循环找出有这个类名的，就给它生成一个tips并匹配相应的内容

溢出调整，只要tips框框的offsetLeft加上本身的offsetWidth，如果大于父级的宽度( 不带边框 )，超出的部分就是要调整的数值，直接 left = -超出的部分，就可以了

难点：

上下溢出调整的实现有点小bug，不知是不是css样式影响到了

难点解决方案：

直接父级overflow：hidden，但这不是最佳方案，以后如遇到同样的问题再看看

涉及的新知识：

offsetLeft   获取外边框到有定位元素的内边缘

offsetWidth   获取包括border的宽度

offsetHeight    获取包括border的高度

优化方向：

数据用获取得到

备注：

无

var json = {
tf:'台风（Typhoon），指形成于热带或副热带26℃以上广阔海面上的热带气旋。'+
'世界气象组织定义：中心持续风速在12级至13级（即32.7~41.4m/s）的热'+
'带气旋为台风（typhoon）或飓风（hurricane）…。北太平洋西部（赤道'+
'以北，国际日期线以西，东经100度以东）地区通常称其为台风，而北大西'+
'洋及东太平洋地区则普遍称之为飓风。每年的夏秋季节，我国毗邻的西北太'+
'平洋上会生成不少名为台风的猛烈风暴，有的消散于海上，有的则登上陆地'+
'，带来狂风暴雨，是自然灾害的一种。',

tf2:'台风（Typhoon），指形成于热带或副热带26℃以上广阔海面上的热带气旋。'+  
    '世界气象组织定义：中心持续风速在12级至13级（即32.7~41.4m/s）的热'+  
    '带气旋为台风（typhoon）或飓风（hurricane）...。北太平洋西部（赤道'  

}

var panel = $class('div','content')[0],
oTips = $class('a','tips'),
panelW = panel.offsetWidth
panelH = panel.offsetHeight;

panel.style.position = 'absolute';
panel.style.left = ( 1000 - panelW ) / 2 + 'px';
panel.style.top = ( 600 - panelH ) / 2 + 'px';

createTips();

for(var i=0,len=oTips.length; i<len; i++){

oTips\[i\].onmouseover = function(){  
    oSpan = this.getElementsByTagName('span')\[0\];  
    oSpan.style.display = 'block';  
}

oTips\[i\].onmouseout = function(){  
    oSpan.style.display = 'none';  
}  

}

function createTips(){

for(var i=0,len=oTips.length; i<len; i++){

    var eDiv = document.createElement('span');  
    eDiv.setAttribute('class','tipsDiv');  
    oTips\[i\].appendChild(eDiv);  
    eDiv.style.position = 'absolute';

    var attr = oTips\[i\].getAttribute('attr');

    if( json\[attr\].length > 186 ){  
        eDiv.innerHTML = json\[attr\].substring(0,186) + '...';  
    }else{  
        eDiv.innerHTML = json\[attr\];  
    }

    var eA = document.createElement('a');  
    eA.setAttribute('href','javascript:;');  
    eA.innerHTML = '详细>>';  
    eDiv.appendChild(eA);

    var eDivBorder = parseInt( getStyle(panel,'borderWidth') )\*2;

    var difL = ( panel.offsetWidth - eDivBorder ) - ( eDiv.offsetWidth + oTips\[i\].offsetLeft );

    var difT = ( panel.offsetHeight - eDivBorder ) - ( eDiv.offsetHeight + oTips\[i\].offsetTop );

    if( difL < 0 ){  
        eDiv.style.left = difL + 'px';  
    }

    if( difT < 0 ){  
        eDiv.style.top = difT + 'px';

    }

    console.log( eDiv.offsetHeight );  
    console.log( oTips\[i\].offsetTop );  
    console.log( ' ' );  
    // console.log( eDiv.offsetHeight );  
    eDiv.style.display = 'none';

}

}