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是一个用最佳实践和流行 ...
随机推荐
- Log4j 汇总
一.概念 .1. log4j是 是线程安全的 日志框架,高度可配置,可通过在运行时的外部文件配置. 默认情况下,日志管理在CLASSPATH 查找一个名为 log4j.properties 的文件. ...
- Docker for window 无法共享磁盘
Docker for window 无法共享主机磁盘,环境如下: 操作系统: windown10 Docker version 18.09.0, build 4d60db4 症状如下: 如图,点击ap ...
- 5、手把手教React Native实战之盒子模型BoxApp
用HTML5和React Native分别实现盒子模型显示 写法不一样: 1.样式  => x + 1 increase(10) res0: Int = 11 意思就是你 ...
- js 中和c类似
w <script type="text/javascript"> <!-- var w = 123 alert(w) function fun(){ alert ...