需求

移入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. HEVC Advance & H.265 专利费

    HEVC Advance & H.265 专利费 https://www.hevcadvance.com/pdfnew/HEVC_Advance_Program_Overview_cn.pdf

  2. react hooks & props change & pagination current bug

    react hooks & props change & pagination current bug multi tables & pigination bug & ...

  3. parcel bug & not support normal import React & ReactDOM module

    bug report not support normal import React & ReactDOM module, why Code Sample OK import * as Rea ...

  4. c++ winapi 让目标程序(target)调用当前程序(local)的函数

    GameCheat 如果你的目标程序是x86/x64, 那么当前程序也需要编译为x84/x64 #include <iostream> #include <string> #i ...

  5. vue2.0用法以及环境配置

    一.配置环境搭建 1.安装node.js (可以去官网看) 2.安装git (推荐看廖雪峰文章,点击查看) 3.安装vue: cmd:npm install vue //最新稳定版本 npm inst ...

  6. Scrapy项目_苏宁图书信息

     苏宁图书(https://book.suning.com/) 目标: 1.图书一级分类 2.图书二级分类 3.图书三级分类 4.图书名字 5.图书作者 6.图书价格 7.通过Scrapy获取以上数据 ...

  7. hadoop支持lzo完整过程

    简介 启用lzo 启用lzo的压缩方式对于小规模集群是很有用处,压缩比率大概能降到原始日志大小的1/3.同时解压缩的速度也比较快. 安装lzo lzo并不是linux系统原生支持,所以需要下载安装软件 ...

  8. 用铁电存储器FRAM让穿戴式设备更省电

    可穿戴设备应用中的显示屏消耗了大部分电池电力.解决方法之一是直接提高电池容量,但是大容量电池会加大尺寸和重量,对可穿戴设备不合适,尤其是在市场不断追求更小型化的新款产品时更是如此.更具挑战性的是电池技 ...

  9. Vue脚手架中默认的margin怎么清除

    问题情景:开发中发现我的项目四周有白边,但是并没有设置样式 问题原因:vue脚手架中静态文件夹public中的index.html造成的 解决方案:找到vue脚手架中index.html页面,设置ma ...

  10. 看完了进程同步与互斥机制，我终于彻底理解了 PV 操作

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 CS-Wiki(Gitee 官 ...