仿苹果手机通讯录按字母定位
2016-06-21 14:33
344 查看
当初写这个的时候，是因为开发移动端项目的时候使用的，虽然PC端也能用，不过效果就没那么好了。大家如果需要的，可以自己修改一下代码使用。。
下面就直接上代码了。。。
下面就直接上代码了。。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<title>仿苹果手机通讯录按字母定位</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul,ol{
list-style-type:none;
}
a{
text-decoration:none;
}
.p_lr_15{
padding:0 15px;
}
.point_nav{
width:25px;
height:100%;
background:#ccc;
font-size:12px;
position:fixed;
right:0;
top:0;
}
.point_nav ul{
width:25px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.point_nav li{
text-align:center;
}
.point_nav li a{
display:block;
}
.tracing_point {
background: #f7f7f7;
height: 20px;
line-height: 20px;
}
.tracing_point ul li a{
color:#646464;
}
.city_num {
width: 100%;
margin: 0;
padding: 0;
}
.city_num li {
height: 44px;
line-height: 44px;
border-bottom: 1px solid #ccc;
}
.city_num li a {
color: #000000;
display: block;
}
.city_num li:last-child {
border-bottom: none;
}
.p_c{
position:fixed;
left:50%;
top:50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript">
var anchorPoint = {
touchstart : "touchstart",
touchmove : "touchmove",
touchend : "touchend",
touchEvents: function () {
var ua = window.navigator.userAgent;
if(!/ipad|iphone|android/.test(ua.toLowerCase())){
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
return true;
}
},
compatible:function(target,evt,obj){
if(document.all){
target.attachEvent('on'+evt,obj);
}else{
target.addEventListener(evt,obj,false);
}
},
compatible_ie:function(){
if(document.all){
window.event.returnValue = false;
}else{
event.preventDefault();
event.stopPropagation();
}
},
scrollTop_ie:function(val){
if(document.all){
document.documentElement.scrollTop = val;
}else{
document.body.scrollTop = val;
}
},
start:function(event){
var touch_x = null;
var touch_y = null;
if(anchorPoint.touchEvents() == true){
touch_x = event.clientX;
touch_y = event.clientY;
}else{
touch_x = event.touches[0].pageX;
touch_y = event.touches[0].pageY;
}
anchorPoint.changeLocal(touch_x,touch_y);
anchorPoint.compatible_ie();
},
move:function(event){
var touch_x = null;
var touch_y = null;
if(anchorPoint.touchEvents() == true){
touch_x = event.clientX;
touch_y = event.clientY;
}else{
touch_x = event.touches[0].pageX;
touch_y = event.touches[0].pageY;
}
anchorPoint.changeLocal(touch_x,touch_y);
anchorPoint.compatible_ie();
},
end:function(event){
//e.stopPropagation();
anchorPoint.compatible_ie();
},
changeLocal:function(touch_x,touch_y){
var point_nav_text = null;
var y = null;
if(this.touchEvents() != true){
y = touch_y - document.body.scrollTop;
}else{
y = touch_y;
}
try{
var point = document.elementFromPoint(touch_x,y);
if(point&&point.tagName){
var point_tagName = point.tagName.toLowerCase();
if(point_tagName == "a"){
point_nav_text = point.innerHTML;
}
var point_nav_text_top = document.getElementById(point_nav_text);
if(point_nav_text == "#"){
this.scrollTop_ie(0);
return;
}
if(point_nav_text_top != null){
var top = point_nav_text_top.offsetTop;
this.scrollTop_ie(top);
}
}
}catch(e){
var inner_text = document.getElementById("text");
inner_text.innerHTML = e;
}
},
init:function(target_id,child_ele){
var self = this;
self.touchEvents();
var point_nav = document.getElementById(target_id);
var point_nav_li = point_nav.getElementsByTagName(child_ele);
self.compatible(point_nav,self.touchstart,self.start);
self.compatible(point_nav,self.touchmove,self.move);
self.compatible(point_nav,self.touchend,self.end);
}
};
window.onload=function(){
anchorPoint.init("point_nav","li");
}
</script>
</head>
<body>
<div class="p_c" id="text"></div>
<div class="tracing_point">
<div class="p_lr_15">
<a href="javascript:void(0);" id="B">B</a>
</div>
</div>
<div class="city_num">
<ul class="p_lr_15">
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
<li><a href="javascript:void(0)">北京市</a></li>
</ul>
</div>
<div class="tracing_point">
<div class="p_lr_15">
<a href="javascript:void(0);" id="C">C</a>
</div>
</div>
<div class="city_num">
<ul class="p_lr_15">
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长春</a></li>
</ul>
</div>
<div class="tracing_point">
<div class="p_lr_15">
<a href="javascript:void(0);" id="D">D</a>
</div>
</div>
<div class="city_num">
<ul class="p_lr_15">
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
<li><a href="javascript:void(0)">大理</a></li>
</ul>
</div>
<div class="tracing_point">
<div class="p_lr_15">
<a href="javascript:void(0);" id="H">H</a>
</div>
</div>
<div class="city_num">
<ul class="p_lr_15">
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
<li><a href="javascript:void(0)">海珠区</a></li>
</ul>
</div>
<div class="point_nav" id="point_nav">
<ul>
<li><a href="javascript:void(0);" id="aa">#</a></li>
<li><a href="javascript:void(0);">A</a></li>
<li><a href="javascript:void(0);">B</a></li>
<li><a href="javascript:void(0);">C</a></li>
<li><a href="javascript:void(0);">D</a></li>
<li><a href="javascript:void(0);">E</a></li>
<li><a href="javascript:void(0);">F</a></li>
<li><a href="javascript:void(0);">G</a></li>
<li><a href="javascript:void(0);">H</a></li>
<li><a href="javascript:void(0);">I</a></li>
<li><a href="javascript:void(0);">J</a></li>
<li><a href="javascript:void(0);">K</a></li>
<li><a href="javascript:void(0);">L</a></li>
<li><a href="javascript:void(0);">M</a></li>
<li><a href="javascript:void(0);">N</a></li>
<li><a href="javascript:void(0);">O</a></li>
<li><a href="javascript:void(0);">P</a></li>
<li><a href="javascript:void(0);">Q</a></li>
<li><a href="javascript:void(0);">R</a></li>
<li><a href="javascript:void(0);">S</a></li>
<li><a href="javascript:void(0);">T</a></li>
<li><a href="javascript:void(0);">U</a></li>
<li><a href="javascript:void(0);">V</a></li>
<li><a href="javascript:void(0);">W</a></li>
<li><a href="javascript:void(0);">X</a></li>
<li><a href="javascript:void(0);">Y</a></li>
<li><a href="javascript:void(0);">Z</a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android之获取手机上的图片和视频缩略图thumbnails
- android wifi 无线调试
- 移动端的长按事件
- 基于 Linux 的智能手机 Librem 5 开启预售
- 5 个可以满足你的生产力、沟通和娱乐需求的开源手机应用
- 每日安全资讯：哪些属于App违法违规收集使用个人信息？
- 每日安全资讯：命案侦破过程揭示 Google 能够跟踪全世界的手机
- 手机4大隐藏功能及使用必知常识第1/2页
- Android改变手机屏幕朝向的方法
- php实现用手机关闭计算机（电脑）的方法
- 移动端H5开发 Turn.js实现很棒的翻书效果
- 基于JavaScript代码实现pc与手机之间的跳转
- js判断手机和pc端选择不同执行事件的方法
- JS判断客户端是手机还是PC的2个代码
- 如何实现移动端浏览器不显示 pc 端的广告
- 手机屏幕尺寸测试――手机的实际显示页面的宽度
- 移动端JQ插件hammer使用详解
- jquery实现移动端点击图片查看大图特效
- jquery实现简易的移动端验证表单