需求

移入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 【总结】的更多相关文章

  1. Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips （转）

    忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...

  2. 【Tips】史上最全H1B问题合辑——保持H1B身份终级篇

    [Tips]史上最全H1B问题合辑——保持H1B身份终级篇 2015-04-10留学小助手留学小助手 留学小助手 微信号 liuxue_xiaozhushou 功能介绍 提供最真实全面的留学干货,帮您 ...

  3. layer.js中layer.tips

    <script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...

  4. HTML 最简单的tips 怎么支持指定DIV显示提示信息

    <body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...

  5. CSS：CSS使用Tips

    Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证. 一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果 ...

  6. 【读书笔记】100个Switf必备tips

    声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.Selector 在Swi ...

  7. 【转】40个良好用户界面Tips

    一个良好的用户界面应具有高转换率,并且易于使用.但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助! 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的 ...

  8. 转：Eclipse Search Tips

    from:  https://github.com/ajermakovics/eclipse-instasearch/wiki/Eclipse-search-tips Eclipse Search T ...

  9. VS：101 Visual Studio 2010 Tips

    101 Visual Studio 2010 Tips Tip #1        How to not accidentally copy a blank line TO – Text Editor ...

  10. [css 揭秘]-css coding tips

    css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...

随机推荐

  1. toString()[0]

    toString()[0] https://prepack.io/ x = `A` //"A" x.toString()[0] //"A" x.toString ...

  2. css 使用paint创建自定义css

    See also: https://houdini.how/ https://github.com/una/extra.css#readme

  3. Flutter中mixin的使用

    页表页面 这是一个普通的展示数据,上拉加载更多数据的列表. 其中有一个类型为List<T>的数据列表listData,有个page数据用于分页,isLoading用来判断是否正在加载数据, ...

  4. betterscroll上拉加载

    mounted(){ var that=this; setTimeout(()=>{ let scroll = new BScroll(document.getElementById('wrap ...

  5. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  6. 在gradle中构建java项目

    目录 简介 构建java项目的两大插件 管理依赖 编译代码 管理resource 打包和发布 生成javadoc 简介 之前的文章我们讲到了gradle的基本使用,使用gradle的最终目的就是为了构 ...

  7. SpringBoot Admin应用监控搭建

    简介 Spring Boot Admin 用于监控基于 Spring Boot 的应用,它是在 Spring Boot Actuator 的基础上提供简洁的可视化 WEB UI. 参考手册地址:htt ...

  8. 第46天学习打卡（四大函数式接口 Stream流式计算 ForkJoin 异步回调 JMM Volatile）

    小结与扩展 池的最大的大小如何去设置! 了解:IO密集型,CPU密集型:(调优)  //1.CPU密集型 几核就是几个线程 可以保持效率最高 //2.IO密集型判断你的程序中十分耗IO的线程,只要大于 ...

  9. Java并发之ThreadPoolExecutor源码解析（三）

    Worker 先前,笔者讲解到ThreadPoolExecutor.addWorker(Runnable firstTask, boolean core),在这个方法中工作线程可能创建成功,也可能创建 ...

  10. POJ-3660(Floyd算法)

    Cow Contest POJ-3660 1.本题考察的是最短路,用的算法是Floyd算法 2.如果一个结点和剩余的n-1个结点都有关系,那么可以确定其排名 3.需要注意的是,判断是否有关系时,反向关 ...