需求

移入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. Pycharm缺少环境变量+无法获取libcudnn.so.6

    在终端输入: echo LD_LIBRARY_PATH, 并将其内容 添加至Pycharm的 run -> Edit configuration -> Environment variab ...

  2. flutter package & pub publish

    flutter package & pub publish dart-library-package https://pub.dev/packages/dart_library_package ...

  3. Regular Expressions all in one

    Regular Expressions all in one Regular Expressions Cheatsheet https://developer.mozilla.org/en-US/do ...

  4. js operate svg

    js operate svg js dynamic create svg https://stackoverflow.com/questions/20539196/creating-svg-eleme ...

  5. 比特币跌破3.5万美元，巨鲸们将目光瞄向SPC算力币

    比特币最近又迎来了大幅下跌,截至周三(1月20日),比特币跌幅超过5%,跌破3.5万美元.很显然,比特币没有预期那样顺顺利利地登顶4万美元,反而又出现了回调迹象.有些巨鲸们在大肆囤币,然而也有些巨鲸们 ...

  6. 市值达万亿？总量仅10万枚的VAST，先兑换先得！

    据了解,SPC第一轮.第二轮空投已经结束,两轮空投下来共发放了400万枚SPC.NGK所有算力持有者有效账户基本获得了SPC空投奖励,甚至有的NGK算力持有者获得了数千枚SPC. 而为了进一步奖励NG ...

  7. c#（winform）获取本地打印机

    引用 using System.Drawing.Printing; //代码 PrintDocument prtdoc = new PrintDocument(); string strDefault ...

  8. c语言：分治算法之大数相乘

    我们把整数A由规模n分为n1和n2,把整数B由规模m分为m1和m2,如下图: 则A分为n1位的A1和n2位的A1,B分为m1位的B1和m2位的B2,如下式所示: 以此类推,我们可以把A1.A2.B1. ...

  9. Spirng 循环依赖报错：Requested bean is currently in creation: Is there an unresolvable circular reference?

    1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...

  10. Charles 抓取https 包

    1.  Recording Settings中 include 添加 host , port端口为443 2.  SSL Proxying Settings 选中 Enable SSL Proxyin ...