<!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>本文出自 “11050502” 博客，请务必保留此出处http://11060502.blog.51cto.com/11050502/1729245
原文地址：http://11060502.blog.51cto.com/11050502/1729245
