javascript-电话薄小功能
上代码:
<style>
*{ margin:0 ; padding: 0;}
.phrase_wrap,
.phrase_list{
width: 200px;
height: 200px;
}
.phrase_wrap{
position:relative;
overflow: hidden;
margin: 20px auto;
}
.phrase_list{
overflow:auto;
}
.phrase_panel,
.phrase_list dt{
padding: 0 4px;
height: 24px;
background:#066;
color: #fff;
font: bold 14px/24px SimSun;
}
.phrase_panel{
width: 175px;
position:absolute; display: none;
}
</style>
</head> <body> <div class="phrase_wrap" id="phrase_wrap">
<div class="phrase_panel" id="phrase_panel"></div>
<dl id="phrase_list" class="phrase_list">
<dt>A</dt>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dt>B</dt>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dt>C</dt>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dt>D</dt>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dt>A</dt>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dd>a1</dd>
<dt>B</dt>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dd>b2</dd>
<dt>C</dt>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dd>c3</dd>
<dt>D</dt>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
<dd>d4</dd>
</dl>
</div> <script>
/**
实现滚动下面条码的时候，对应的导航标题，在顶端显示。
分析：
1、首先要得到所有标题列表的坐标。
2、设置显示面板的内容。
步骤：
1、获取标题列表集合，并获取对应的坐标值。
2、设置显示面板内容并记录当前列表集合的索引。
*/ /**
实现滚动下面条码的时候，对应的导航标题，在顶端显示。
分析：
1、首先要得到所有标题列表的坐标。
2、设置显示面板的内容。
步骤：
1、获取标题列表集合，并获取对应的坐标值。 var phraseHeadList=[]
var phraseHead={title:'',x:0,y:0}//标题，坐标 2、设置显示面板内容并记录当前列表集合的索引。
var phrasePanel={title:'',curHeadIndex:0};
*/ /**
实现滚动下面条码的时候，对应的导航标题，在顶端显示。
分析：
1、首先要得到所有标题列表的坐标。
2、设置显示面板的内容。
步骤：
1、获取标题列表集合，并获取对应的坐标值。 var phraseHeadList=[]
var phraseHead={title:'',x:0,y:0}//标题，坐标 2、设置显示面板内容并记录当前列表集合的索引。
var phrasePanel={title:'',curHeadIndex:0}; 3、定位显示面板，并显示当前的标题
setPanel(index);
*/
//获取标题列表集合，并获取对应的坐标值。
var phraseList=document.getElementById("phrase_list");
var phraseListTop=phraseList.offsetTop;
var dts=phraseList.getElementsByTagName('dt');
var phraseHeadList=[];
var phraseHead={title:'',x:0,y:0}//标题，坐标 for(var i=0,len=dts.length;i<len;i++){
phraseHead={
title:dts[i].innerHTML,
x:dts[i].offsetLeft,
y:dts[i].offsetTop-phraseListTop
}
phraseHeadList.push(phraseHead);
} //设置显示面板内容并记录当前列表集合的索引。
var phrasePanel=document.getElementById('phrase_panel') //监听
var phraseWrap=document.getElementById("phrase_wrap");
phraseList.onscroll=function(e){
var scrollTop=this.scrollTop; var idx=getPhraseHeadIndex(scrollTop);
var nextIdx=idx+1;
var len=phraseHeadList.length;
//后一个的值和探测值比较
var probeH=dts[0].offsetHeight;
var diffTop=phraseHeadList[nextIdx].y-scrollTop;
if(diffTop<probeH){
phrasePanel.style.top=diffTop-probeH+'px';
}
setPanel(idx);
//纠错 }
//搜索获取当前索引
function getPhraseHeadIndex(top){
var idx=0;
for(var i=0,len=phraseHeadList.length;i<len;i++){
if(phraseHeadList[i].y<top){
idx=i;
}
if(phraseHeadList[i].y>top){
break;
}
}
return idx;
}
//设置浮动条
function setPanel(index){
if(phrasePanel.index==index)return;
phrasePanel.index=index;
phrasePanel.style.display='block';
phrasePanel.style.top=0;
phrasePanel.innerHTML=phraseHeadList[index].title
} //初始化
setPanel(0) </script>
效果：
javascript-电话薄小功能的更多相关文章
- 纯JavaScript实现一些小功能
题目链接:http://wenku.baidu.com/link?url=7Gbarr5q9X6h1QFRVAsHmfPp1xXagG209mvrJqBogseb4WLeRqbVKwxQieoh8SL ...
- JavaScript 常用的小功能集合
1. 得到当前用户使用的浏览器的内核版本 function getExplorer(){ var browser = ""; var explorer = window.navig ...
- 使用JAVA编写电话薄程序，具备添加，查找，删除等功能
//该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...
- javascript实现的一个信息提示的小功能/
//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来 ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
- ( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
- ( 译、持续更新 ) JavaScript 上分小技巧(一)
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
- ABP CORE 框架入门视频教程《电话薄》基于 Asp.NET Core2.0 EF Core
ABP框架简介 ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行 ...
随机推荐
- push certificate
developer_identity.cer <= download from Applemykey.p12 <= Your private key openssl x509 -in de ...
- 让python pip使用国内镜像
国内源: 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 h ...
- hdu1814（2-SAT）
2-SAT 求出可能的解,但是这个解要是字典序最小的,所以只能采用2-SAT基本思想来解. 从小到大开始,对一个可能的点染色,染为1,然后dfs其所有能到达的点,如果其中出现一个已经标号为-1的话,那 ...
- springboot2.1.1 中集成websocket 单元测试异常
单元测试在没有集成websocket之前是好好的,当集成websocket之后就出现了下面的异常(只贴出来关键信息): 2019-01-11 10:05:42 [ERROR] [org.springf ...
- box-sizing与calc()与flex
1,Syntax: /* Keyword values */ box-sizing: content-box; box-sizing: border-box; /* Global values */ ...
- AngularJS 讲解,一 数据绑定
AngularJS 完全使用javascript 编写的客户端技术.通过原生的Model-View-Controller(MVC,模型视图控制器)功能增强了HTML.这个选择可以快捷和愉悦地构建出 ...
- linux禁用触摸板驱动
Method 1: 终端输入如下命令: sudo modprobe -r psmouse 如果打开触摸板就是: sudo modprobe psmouse ------- Method 2: 第一步: ...
- POJ 2609 Ferry Loading(双塔DP)
Ferry Loading Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1807 Accepted: 509 Sp ...
- SSH 框架整合总结
1. 搭建Struts2 环境 创建 struts2 的配置文件: struts.xml; 在 web.xml 中配置 struts2 的核心过滤器; // struts.xml <?xml v ...
- OpenStack Network --- introduction部分 阅读笔记
Basic Networking 1.混杂模式(promiscuous mode):当网卡被配置为混杂模式时,它们会将所有的frame传递给操作系统,即使MAC地址不匹配. 2.交换机(switch) ...