需求

移入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的高度

优化方向：

数据用获取得到

备注：

无

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.  
  7. <style>
  8.  
  9. *{ margin: 0; padding: 0; }
  10. a{ text-decoration: none; }
  11.  
  12. .wrap{ width: 1000px; height: 600px; position: relative; margin: 0 auto; background: url(bg.jpg) no-repeat 0 0; }
  13.  
  14. .content{ width: 582px; height: 332px; padding: 0 40px; border: 3px solid #fff; background: rgba(0,0,0,0.8); border-radius: 5px; overflow: hidden; }
  15.  
  16. .content h3{ color: #d8c17b; font-size: 22px; margin: 30px 0; text-align: center; }
  17.  
  18. .content p{ font-size: 14px; line-height: 30px; color: #fff; }
  19.  
  20. .tips{ color: #d8c17b; position: relative; }
  21.  
  22. .tipsDiv{
  23.     width: 420px;
  24.     max-height: 170px;
  25.     border: 3px solid #fff;
  26.     border-radius: 5px;
  27.     background: rgba(0, 188, 212, 0.8);
  28.     top: 20px;
  29.     left: 0px;
  30.     color: #fff;
  31.     padding: 10px;
  32.     overflow: hidden;
  33.     /*line-height: 28px;*/
  34.     z-index: 9;
  35. }
  36.  
  37. .tipsDiv a{ color: #fff; float: right; }
  38. .tipsDiv a:hover{ text-decoration: underline; }
  39.  
  40. </style>
  41.  
  42. </head>
  43. <body>
  44.  
  45. <!-- 
  46.  
  47. 需求：
  48. 移入a标签
  49. 把对应的详情显示出来并且根据位置判断，当前详情是否超出父级可视区
  50. 范围，如果超出就定位的距离方向应该正好在父级可视区
  51. 范围内
  52.  
  53.  -->
  54.  
  55. <div class="wrap">
  56.  
  57.     <div class="content">
  58.  
  59.         <h3>强台风“鲇鱼”登陆台湾花莲 10省市将迎风雨</h3>
  60.         <p>
  61.             今年第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省市有强风雨。
  62.         </p>
  63.  
  64.     </div>
  65.  
  66. </div>
  67.  
  68. <script src="getId.js"></script>
  69. <script src="main.js"></script>
  70. </body>
  71. </html>
  1. var json = {
  2.     tf:'台风（Typhoon），指形成于热带或副热带26℃以上广阔海面上的热带气旋。'+
  3.         '世界气象组织定义：中心持续风速在12级至13级（即32.7~41.4m/s）的热'+
  4.         '带气旋为台风（typhoon）或飓风（hurricane）...。北太平洋西部（赤道'+
  5.         '以北，国际日期线以西，东经100度以东）地区通常称其为台风，而北大西'+
  6.         '洋及东太平洋地区则普遍称之为飓风。每年的夏秋季节，我国毗邻的西北太'+
  7.         '平洋上会生成不少名为台风的猛烈风暴，有的消散于海上，有的则登上陆地'+
  8.         '，带来狂风暴雨，是自然灾害的一种。',
  9.  
  10.     tf2:'台风（Typhoon），指形成于热带或副热带26℃以上广阔海面上的热带气旋。'+
  11.         '世界气象组织定义：中心持续风速在12级至13级（即32.7~41.4m/s）的热'+
  12.         '带气旋为台风（typhoon）或飓风（hurricane）...。北太平洋西部（赤道'
  13. }
  14.  
  15. var panel = $class('div','content')[0],
  16.     oTips = $class('a','tips'),
  17.     panelW = panel.offsetWidth
  18.     panelH = panel.offsetHeight;
  19.  
  20. panel.style.position = 'absolute';
  21. panel.style.left = ( 1000 - panelW ) / 2 + 'px';
  22. panel.style.top = ( 600 - panelH ) / 2 + 'px';
  23.  
  24. createTips();
  25.  
  26. for(var i=0,len=oTips.length; i<len; i++){
  27.  
  28.     oTips[i].onmouseover = function(){
  29.         oSpan = this.getElementsByTagName('span')[0];
  30.         oSpan.style.display = 'block';
  31.     }
  32.  
  33.     oTips[i].onmouseout = function(){
  34.         oSpan.style.display = 'none';
  35.     }
  36. }
  37.  
  38. function createTips(){
  39.  
  40.     for(var i=0,len=oTips.length; i<len; i++){
  41.  
  42.         var eDiv = document.createElement('span');
  43.         eDiv.setAttribute('class','tipsDiv');
  44.         oTips[i].appendChild(eDiv);
  45.         eDiv.style.position = 'absolute';
  46.  
  47.         var attr = oTips[i].getAttribute('attr');
  48.  
  49.         if( json[attr].length > 186 ){
  50.             eDiv.innerHTML = json[attr].substring(0,186) + '...';
  51.         }else{
  52.             eDiv.innerHTML = json[attr];
  53.         }
  54.  
  55.         var eA = document.createElement('a');
  56.         eA.setAttribute('href','javascript:;');
  57.         eA.innerHTML = '详细>>';
  58.         eDiv.appendChild(eA);
  59.  
  60.         var eDivBorder = parseInt( getStyle(panel,'borderWidth') )*2;
  61.  
  62.         var difL = ( panel.offsetWidth - eDivBorder ) - ( eDiv.offsetWidth + oTips[i].offsetLeft );
  63.  
  64.         var difT = ( panel.offsetHeight - eDivBorder ) - ( eDiv.offsetHeight + oTips[i].offsetTop );
  65.  
  66.         if( difL < 0 ){
  67.             eDiv.style.left = difL + 'px';
  68.         }
  69.  
  70.         if( difT < 0 ){
  71.             eDiv.style.top = difT + 'px';
  72.  
  73.         }
  74.  
  75.         console.log( eDiv.offsetHeight );
  76.         console.log( oTips[i].offsetTop );
  77.         console.log( ' ' );
  78.         // console.log( eDiv.offsetHeight );
  79.         eDiv.style.display = 'none';
  80.  
  81.     }
  82.  
  83. }

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. 力扣485. 最大连续1的个数-C语言实现-简单题

    题目 [题目传送门] 给定一个二进制数组, 计算其中最大连续1的个数. 示例 1: 输入: [1,1,0,1,1,1] 输出: 3 解释: 开头的两位和最后的三位都是连续1,所以最大连续1的个数是 3 ...

  2. IT-ebooks free download website & IT 电子书籍免费下载网站

    free ebooks of programming 1. http://www.it-ebooks.info/ http://www.it-ebooks-api.info/ 2. http://ww ...

  3. Subresource Integrity,SRI,Cross-Origin Resource Sharing (CORS),子资源的完整性检查,Subresource Integrity checking,CORS,Ajax

    SRI https://code.jquery.com/ SRI是一种新的W3C规范,它允许Web开发人员,以确保托管在第三方服务器上的资源是没有被篡改的.SRI的使用,建议作为最佳实践,每当库从第三 ...

  4. Angular Learning Paths

    Angular Learning Paths Angular Expert refs https://app.pluralsight.com/search/?q=angular xgqfrms 201 ...

  5. npm & cmd & bash & bin

    npm & cmd & bash & bin bin node_modules & nested npm publish & all src files npm ...

  6. Rust learning notes

    Rust learning notes Rust Version 1.42.0 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs ...

  7. 2021 NGK生态所体验好、交易快 引人注目！

    据悉,NGK计划于2021年2月15日正式上线自己的生态所(时间待定),目的在于满足NGK生态建设者对于NGK几大币种的交易等需求,如NGK.BGV.SPC.USDN.VAST等.只要上NGK生态所, ...

  8. Jupyter notebook操作技巧

    学习笔记:Jupyter notebook操作技巧 一.jupyter notebook简介.用途.优势和缺点 二. 单元Cell: 三.操作技巧 - 给Jupyter换主题 - 笔记本扩展(nbex ...

  9. Echarts制作一张全球疫情图

    一.获取全球疫情数据 1)获取API 使用用友提供的新冠肺炎实时数据,登录注册之后可以免费使用. 2)点击用户信息 这里的AIPCODE,复制并保存,用于后续的使用. 3)API的使用 用友有提供一个 ...

  10. JS广度优先遍历

    自己用JS实现了 广度优先遍历 第一种用了数组的高阶函数,看起来有些复杂.然后思索着从可读性上优化了一下,孰优孰劣以后分析. var list = [{ id: "ab", chi ...