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'; } }
tips 【总结】的更多相关文章
- Mac上MySQL忘记root密码且没有权限的处理办法&workbench的一些tips (转)
忘记Root密码肿么办 Mac上安装MySQL就不多说了,去mysql的官网上下载最新的mysql包以及workbench,先安装哪个影响都不大.如果你是第一次安装,在mysql安装完成之后,会弹出来 ...
- 【Tips】史上最全H1B问题合辑——保持H1B身份终级篇
[Tips]史上最全H1B问题合辑——保持H1B身份终级篇 2015-04-10留学小助手留学小助手 留学小助手 微信号 liuxue_xiaozhushou 功能介绍 提供最真实全面的留学干货,帮您 ...
- layer.js中layer.tips
<script src="~/Content/js/layer/layer.js"></script> layer.tips('名称不能为空', '#pro ...
- HTML 最简单的tips 怎么支持指定DIV显示提示信息
<body> <style type="text/css"> a.link{position:relative;} a.link div.tips{ bor ...
- CSS:CSS使用Tips
Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证. 一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果 ...
- 【读书笔记】100个Switf必备tips
声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblogs.com 正文 1.Selector 在Swi ...
- 【转】40个良好用户界面Tips
一个良好的用户界面应具有高转换率,并且易于使用.但要用户体验良好并不容易做到,下面我们整理了40个良好用户界面Tips,希望能对你有帮助! 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的 ...
- 转:Eclipse Search Tips
from: https://github.com/ajermakovics/eclipse-instasearch/wiki/Eclipse-search-tips Eclipse Search T ...
- VS:101 Visual Studio 2010 Tips
101 Visual Studio 2010 Tips Tip #1 How to not accidentally copy a blank line TO – Text Editor ...
- [css 揭秘]-css coding tips
css 揭秘之css coding tips demo(1) html 代码: <body> <section> <div class="demo1" ...
随机推荐
- 云原生系列1 pod基础
POD解决了什么问题? 成组资源调度问题的解决. mesos采用的资源囤积策略容易出现死锁和调度效率低下问题:google采用的乐观调度技术难度非常大: 而k8s使用pod优雅的解决了这个问题. po ...
- Linux内核实现透视---工作队列
作为Linux中断低半部的另一种实现机制的基础,工作队列的出现更多的是为了解决软中断和Tasklet对于用户进程的时间片的不良影响问题的.工作队列本身是可以使用内核线程来替代的,但是使用线程来实现复杂 ...
- Emoji of github & twitter
Emoji cheat sheet http://www.emoji-cheat-sheet.com/ https://github.com/xgqfrms/emoji-cheat-sheet.com ...
- image auto downloader
image auto downloader icons killer / js crawler http only + same-origin OK "use strict"; / ...
- color recognition by image
color recognition by image 通过图像进行颜色识别 https://imagecolorpicker.com/ unknown color origin pic grey bl ...
- Linux & terminal color & command line color
Linux & terminal color & command line color how to change Linux terminal color https://askub ...
- PWA & bug
PWA bug https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps https://learning.xgqfrms.x ...
- Chrome debug & string to object & copy format json
Chrome debug & string to object & copy format json // save as global variable copy(JSON.stri ...
- linux cd root directory
linux cd root directory https://www.cyberciti.biz/faq/how-to-change-directory-in-linux-terminal/ htt ...
- Spark在处理数据的时候,会将数据都加载到内存再做处理吗?
对于Spark的初学者,往往会有一个疑问:Spark(如SparkRDD.SparkSQL)在处理数据的时候,会将数据都加载到内存再做处理吗? 很显然,答案是否定的! 对该问题产生疑问的根源还是对Sp ...