tips 【总结】

需求

移入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的高度

优化方向：

数据用获取得到

备注：

无

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

<style>

*{ margin: 0; padding: 0; }

a{ text-decoration: none; }

.wrap{ width: 1000px; height: 600px; position: relative; margin: 0 auto; background: url(bg.jpg) no-repeat 0 0; }

.content{ width: 582px; height: 332px; padding: 0 40px; border: 3px solid #fff; background: rgba(0,0,0,0.8); border-radius: 5px; overflow: hidden; }

.content h3{ color: #d8c17b; font-size: 22px; margin: 30px 0; text-align: center; }

.content p{ font-size: 14px; line-height: 30px; color: #fff; }

.tips{ color: #d8c17b; position: relative; }

.tipsDiv{

    width: 420px;

    max-height: 170px;

    border: 3px solid #fff;

    border-radius: 5px;

    background: rgba(0, 188, 212, 0.8);

    top: 20px;

    left: 0px;

    color: #fff;

    padding: 10px;

    overflow: hidden;

    /*line-height: 28px;*/

    z-index: 9;

}

.tipsDiv a{ color: #fff; float: right; }

.tipsDiv a:hover{ text-decoration: underline; }

</style>

</head>

<body>

<!-- 

需求：

移入a标签

把对应的详情显示出来并且根据位置判断，当前详情是否超出父级可视区

范围，如果超出就定位的距离方向应该正好在父级可视区

范围内

 -->

<div class="wrap">

    <div class="content">

        <h3>强台风“鲇鱼”登陆台湾花莲 10省市将迎风雨</h3>

        <p>

            今年第17号<a href="javascript:;" class="tips" attr="tf">台风</a>“鲇鱼”今天（27日）14时10分前后以强台风级登陆台湾花莲沿海。台湾多地出现狂风暴雨，20县市停班停课。预计“鲇鱼”将于明天凌<a href="javascript:;" class="tips" attr="tf2">台风</a>晨至上午在福建<a href="javascript:;" class="tips" attr="tf2">台风</a>沿海登陆，10省市有强风雨。今年第17号<a href="javascript:;" class="tips" attr="tf">台风</a>“鲇鱼”今天（27日）14时10分前后以强台风级登陆台湾花莲沿海。台湾多地出现狂风暴雨，20县市停班停课。预计“鲇鱼”将于明天凌<a href="javascript:;" class="tips" attr="tf2">台风</a>晨至上午在福建<a href="javascript:;" class="tips" attr="tf2">台风</a>沿海登陆，10省市有强风雨。

        </p>

    </div>

</div>

<script src="getId.js"></script>

<script src="main.js"></script>

</body>

</html>

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';

    }

}

巴特西

tips 【总结】

最新文章

热门文章