仿苹果手机通讯录按字母定位
更新:HHH   时间:2023-1-7


<!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>


返回web开发教程...