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是一个用最佳实践和流行 ...
随机推荐
- Bower和Gulp集成前端资源
在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...
- [.NET网格计算框架] Alchemi
Alchemi [.NET网格计算框架] 是 一个以使用简易为目的的Windows下的网格计算框架.它提供了:a)开发网格软件的编程环境 和 b)建造网格和运行网格软件的运行机制. A ...
- mysql查询某周的起始日期和终止日期
select subdate(curdate(),date_format(curdate(),'%w')-1) select subdate(curdate(),date_format(curdate ...
- 3 CActiveXUI的一个Bug
如果主窗口直接用变量生成,则关闭窗口时会产生崩溃 如果用new的方式生成,则不会崩溃,所以给出一个临时的快速解决方案,即主窗口都用new生成,_tWinMain改为下面这样: i ...
- Request.RawUrl、Request.Url的区别
如果访问的地址是: http://hovertree.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu 那么 ...
- sql语句select group by order by where一般先后顺序
写的顺序:select ... from... where.... group by... having... order by..执行顺序:from... where...group by... h ...
- If 条件控制 & while循环语句
Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: if 语句 Python中if语句的一般形式如下所示: i ...
- mysql 中sum (if()) 用法
原表: id fenlei time 1 分类1 20130316 2 分类2 20130316 3 分类3 20130317 ...
- Android图片加载框架Picasso最全使用教程1
Picasso介绍 Picasso是Square公司开源的一个Android图形缓存库 A powerful image downloading and caching library for And ...
- JSP使用网站访问人数统计功能，方法与技巧
实现网站访问人数统计功能的步骤: 创建静态登录页面,并指定表单提交由登录处理页面进行处理. 创建登录处理页面获得登录信息,查询数据库,判断该用户是否注册,如果该用户已注册,把已登录用户的信息保存在一个 ...