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是一个用最佳实践和流行 ...
随机推荐
- [USACO5.5]隐藏口令Hidden Password
题目链接:传送门 题目大意:给你一个长度 N 的字符串,5<=N<=5,000,000,将首尾合并成环,断环成链并满足字典序最小,输出此时首字母在原串中的位置-1: 题目思路:最小表示法 ...
- duboo服务调用不到的原因（dubbo启动消费者报错：No provider available for the service）
com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method queryTemplate in the service com.x.a ...
- [LintCode] 删除链表中倒数第n个节点
/** * Definition of ListNode * class ListNode { * public: * int val; * ListNode *next; * ListNode(in ...
- oracle批量update
我个人觉得写的很好 http://blog.csdn.net/wanglilin/article/details/7200201 需求: 将t2(t_statbuf)表中id和t1(T_Mt)表相同的 ...
- 第一份PHP程序
<?php list($ncase) = fscanf(STDIN,"%d"); $mod = 1000000007; for($n=0;$n<$ncase;++$n) ...
- node.js开发学习一HelloWorld
前言:由于公司业务需求,最近启动了node.js的开发任务,想把自己的开发学习历程记录记录下来,可以增加记忆,也方便查找.虽然对javascript有一定的了解,但是刚接触node.js的时候,发现还 ...
- 疯狂Html+CSS+JS 中JS总结
来自:http://mzkmzk.github.io/blog/2015/10/05/amazeing-js/ 0 总结 本书的JS 第一章有讲语法有挺多常见的坑点和原理解释很不错 第二章DOM编程讲 ...
- 手机APP卸载原因 不会卸载
- ES6通过WeakMap解决内存泄漏问题
一.Map 1.定义 Map对象保存键值对,类似于数据结构字典:与传统上的对象只能用字符串当键不同,Map对象可以使用任意值当键. 2.语法 new Map([iterable]) 属性 size:返 ...
- Spring 的IOC容器之XML方式
1. Spring 入门 1.1 概述 Spring 是一个分层的 JavaEE 轻量级开源框架; Spring 的核心是控制反转(IOC)和面向切面(AOP); 1.2 特点 方便解耦,简化开发; ...