tips 【总结】
需求
移入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'; } }