tips 【总结】

最新推荐文章于 2024-07-31 19:10:29 发布

anyan5807

最新推荐文章于 2024-07-31 19:10:29 发布

阅读量172

点赞数

文章标签： json javascript php ViewUI

原文链接：http://www.cnblogs.com/mflnhg/p/9524843.html

版权

需求

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



    }



}

转载于:https://www.cnblogs.com/mflnhg/p/9524843.html

anyan5807

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tips 【总结】

需求移入a标签把对应的详情显示出来并且根据位置判断，当前详情是否超出父级可视区范围，如果超出就定位的距离方向应该正好在父级可视区范围内需求分析：需要用到：offsetLeft 获取外边框到有定位元素的内边缘offsetWidth 获取包括border的宽度offsetHeight 获取包括border的高度实现思路：具体的tips...
复制链接

扫一扫