<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><metaname="format-detection"content="telephone=no"/><metaname="renderer"content="webkit"><metaname="keywords"content=""><metaname="description"content=""><title>仿苹果手机通讯录按字母定位</title><styletype="text/css">*{margin:0;padding:0;}ul,ol{list-style-type:none;}a{text-decoration:none;}.p_lr_15{padding:015px;}.point_nav{width:25px;height:100%;background:#ccc;font-size:12px;position:fixed;right:0;top:0;}.point_navul{width:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}.point_navli{text-align:center;}.point_navlia{display:block;}.tracing_point{background:#f7f7f7;height:20px;line-height:20px;}.tracing_pointullia{color:#646464;}.city_num{width:100%;margin:0;padding:0;}.city_numli{height:44px;line-height:44px;border-bottom:1pxsolid#ccc;}.city_numlia{color:#000000;display:block;}.city_numli:last-child{border-bottom:none;}.p_c{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}</style><scripttype="text/javascript">varanchorPoint={touchstart:"touchstart",touchmove:"touchmove",touchend:"touchend",touchEvents:function(){varua=window.navigator.userAgent;if(!/ipad|iphone|android/.test(ua.toLowerCase())){this.touchstart="mousedown";this.touchmove="mousemove";this.touchend="mouseup";returntrue;}},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){vartouch_x=null;vartouch_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){vartouch_x=null;vartouch_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){varpoint_nav_text=null;vary=null;if(this.touchEvents()!=true){y=touch_y-document.body.scrollTop;}else{y=touch_y;}try{varpoint=document.elementFromPoint(touch_x,y);if(point&&point.tagName){varpoint_tagName=point.tagName.toLowerCase();if(point_tagName=="a"){point_nav_text=point.innerHTML;}varpoint_nav_text_top=document.getElementById(point_nav_text);if(point_nav_text=="#"){this.scrollTop_ie(0);return;}if(point_nav_text_top!=null){vartop=point_nav_text_top.offsetTop;this.scrollTop_ie(top);}}}catch(e){varinner_text=document.getElementById("text");inner_text.innerHTML=e;}},init:function(target_id,child_ele){varself=this;self.touchEvents();varpoint_nav=document.getElementById(target_id);varpoint_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><divclass="p_c"id="text"></div><divclass="tracing_point"><divclass="p_lr_15"><ahref="javascript:void(0);"id="B">B</a></div></div><divclass="city_num"><ulclass="p_lr_15"><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li><li><ahref="javascript:void(0)">北京市</a></li></ul></div><divclass="tracing_point"><divclass="p_lr_15"><ahref="javascript:void(0);"id="C">C</a></div></div><divclass="city_num"><ulclass="p_lr_15"><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li><li><ahref="javascript:void(0)">长春</a></li></ul></div><divclass="tracing_point"><divclass="p_lr_15"><ahref="javascript:void(0);"id="D">D</a></div></div><divclass="city_num"><ulclass="p_lr_15"><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li><li><ahref="javascript:void(0)">大理</a></li></ul></div><divclass="tracing_point"><divclass="p_lr_15"><ahref="javascript:void(0);"id="H">H</a></div></div><divclass="city_num"><ulclass="p_lr_15"><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li><li><ahref="javascript:void(0)">海珠区</a></li></ul></div><divclass="point_nav"id="point_nav"><ul><li><ahref="javascript:void(0);"id="aa">#</a></li><li><ahref="javascript:void(0);">A</a></li><li><ahref="javascript:void(0);">B</a></li><li><ahref="javascript:void(0);">C</a></li><li><ahref="javascript:void(0);">D</a></li><li><ahref="javascript:void(0);">E</a></li><li><ahref="javascript:void(0);">F</a></li><li><ahref="javascript:void(0);">G</a></li><li><ahref="javascript:void(0);">H</a></li><li><ahref="javascript:void(0);">I</a></li><li><ahref="javascript:void(0);">J</a></li><li><ahref="javascript:void(0);">K</a></li><li><ahref="javascript:void(0);">L</a></li><li><ahref="javascript:void(0);">M</a></li><li><ahref="javascript:void(0);">N</a></li><li><ahref="javascript:void(0);">O</a></li><li><ahref="javascript:void(0);">P</a></li><li><ahref="javascript:void(0);">Q</a></li><li><ahref="javascript:void(0);">R</a></li><li><ahref="javascript:void(0);">S</a></li><li><ahref="javascript:void(0);">T</a></li><li><ahref="javascript:void(0);">U</a></li><li><ahref="javascript:void(0);">V</a></li><li><ahref="javascript:void(0);">W</a></li><li><ahref="javascript:void(0);">X</a></li><li><ahref="javascript:void(0);">Y</a></li><li><ahref="javascript:void(0);">Z</a></li></ul></div></body></html>