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是一个用最佳实践和流行 ...
随机推荐
- hashMap与hashTable区别
1.继承不同. public class Hashtable extends Dictionary implements Map public class HashMap extends Abstra ...
- cxGrid 隔行换色
新建一个cxStyleRepository,分别建立几种Styles,如cxgrid_odd,cxgrid_even,cxgrid_selection等,并设置好它们的背景色.字体属性等. 在cxGr ...
- simpson公式求定积分（模板）
#include<cstdio> #include<cmath> #include <algorithm> using namespace std; double ...
- CommonJS和AMD/CMD
JS中的模块规范(CommonJS,AMD,CMD) 一,CommonJS NodeJS是CommonJS规范的实现,webpack也是以CommonJS的形式来书写. 在浏览器环境下,没有模块也不是 ...
- 【BZOJ4596】[Shoi2016]黑暗前的幻想乡 容斥+矩阵树定理
[BZOJ4596][Shoi2016]黑暗前的幻想乡 Description 幽香上台以后,第一项措施就是要修建幻想乡的公路.幻想乡有 N 个城市,之间原来没有任何路.幽香向选民承诺要减税,所以她打 ...
- [LintCode] 尾部的零
class Solution { public: // param n : description of n // return: description of return long long tr ...
- Less-@import 导入选项
//@import 导入选项 --@import 可以至于任何你需要导入的地方 在标准的CSS,@import在规则必须先于所有其他类型的规则.但Less.js不关心 example: .test() ...
- delphi xe学习随意记录
学习来源(根据他们的资料整理) 论坛:http://www.coder163.com(有视频) 博客:http://del.cnblogs.com/(万一的博客) 1.1.1 命名规范的概述 1 ...
- 并发编程8 线程的创建&验证线程之间数据共享&守护线程&线程进程效率对比&锁(死锁/递归锁)
1.线程理论以及线程的两种创建方法 2.线程之间是数据共享的与join方法 3.多线程和多进程的效率对比 4.数据共享的补充线程开启太快 5.线程锁 互斥锁 同步锁 6.死锁现象和递归锁 7.守护线程 ...
- ASP.NET Identity 2集成到MVC5项目--笔记02
ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...