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是一个用最佳实践和流行 ...

随机推荐

IO文件读写
*b表示二进制模式访问,但是对于Linux或者Unix系统来说这个模式没有任何意义,因为他们把所有文件都看做二进制文件,包括文本文件一.三种方法读取文件方法1:open f=open(" ...
AderTemplate
http://www.cnblogs.com/kwklover/archive/2007/07/12/815509.html 概述 AderTemplate是一个小型的模板引擎.无论是拿来直接使用还是 ...
AngularJS 讲解,一数据绑定
AngularJS 完全使用javascript 编写的客户端技术.通过原生的Model-View-Controller(MVC,模型视图控制器)功能增强了HTML.这个选择可以快捷和愉悦地构建出 ...
jQuery.ajax jQuery.post
$.ajax()函数依赖服务器提供的信息来处理返回的数据.如果服务器报告说返回的数据是XML,那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历.如果见得到其他类型,比如HTML,则 ...
Instagram发布动态自动裁剪照片说明
发布Ins时,照片总是被截取一截,感觉很不爽...然后就仔细了解了Ins是如何限制图片大小的. 官方帮助说的很清楚,https://help.instagram.com/163182164042672 ...
idle命令行按ALT+P重复调出上个语句
idle命令行按ALT+P重复调出上个语句
创建存储过程修改role密码
1 创建存储过程 DELIMITER | drop procedure if exists pro_update_role_pwd; CREATE PROCEDURE pro_update_role_ ...
slurm使用
官方文档:https://slurm.schedmd.com/ 用户命令cheatsheet:https://slurm.schedmd.com/pdfs/summary.pdf 占用GPU sall ...
java获取当前路径&读取当前目录下文件
项目目录如下: test1.class中读取test.txt import java.io.*; import java.util.Scanner; public class Test1 { publ ...
window安装redis数据库
1.下载安装包 1.百度网盘链接:https://pan.baidu.com/s/1MrAK5Suc1xpzkbp1WQbP0A 提取码:u9uq 2.GitHub:https://github.co ...

javascript-电话薄小功能

javascript-电话薄小功能的更多相关文章

随机推荐

热门专题