需求

移入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. 云原生系列1 pod基础

    POD解决了什么问题? 成组资源调度问题的解决. mesos采用的资源囤积策略容易出现死锁和调度效率低下问题:google采用的乐观调度技术难度非常大: 而k8s使用pod优雅的解决了这个问题. po ...

  2. Linux内核实现透视---工作队列

    作为Linux中断低半部的另一种实现机制的基础,工作队列的出现更多的是为了解决软中断和Tasklet对于用户进程的时间片的不良影响问题的.工作队列本身是可以使用内核线程来替代的,但是使用线程来实现复杂 ...

  3. Emoji of github & twitter

    Emoji cheat sheet http://www.emoji-cheat-sheet.com/ https://github.com/xgqfrms/emoji-cheat-sheet.com ...

  4. image auto downloader

    image auto downloader icons killer / js crawler http only + same-origin OK "use strict"; / ...

  5. color recognition by image

    color recognition by image 通过图像进行颜色识别 https://imagecolorpicker.com/ unknown color origin pic grey bl ...

  6. Linux & terminal color & command line color

    Linux & terminal color & command line color how to change Linux terminal color https://askub ...

  7. PWA & bug

    PWA bug https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps https://learning.xgqfrms.x ...

  8. Chrome debug & string to object & copy format json

    Chrome debug & string to object & copy format json // save as global variable copy(JSON.stri ...

  9. linux cd root directory

    linux cd root directory https://www.cyberciti.biz/faq/how-to-change-directory-in-linux-terminal/ htt ...

  10. Spark在处理数据的时候，会将数据都加载到内存再做处理吗？

    对于Spark的初学者,往往会有一个疑问:Spark(如SparkRDD.SparkSQL)在处理数据的时候,会将数据都加载到内存再做处理吗? 很显然,答案是否定的! 对该问题产生疑问的根源还是对Sp ...