通过jquery.charfirst.pinyin.js实现点击字母自动定位。实现动态加载通讯录数据。
完整实例代码点击此处本站下载。
主要代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta content="yes"> <meta content="black"> <meta content="telephone=no"> <title>通讯录首字母检索</title> <link href="https://www.jb51.net/css/style.css" > </head> <body> <header> <div> 通讯录 </div> </header> <div ></div> <div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>张三</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>李四</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>王五</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>刘六</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>马七</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>黄八</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>莫九</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>陈十</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>a九</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>1十</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>黄八</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>今天</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>突然</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>梵蒂冈</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>快乐的</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>撒地方</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>官方</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>哦</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>分割</div> </div> <div> <div> <img src="https://www.jb51.net/article/img/img.png" alt=""> </div> <div>票</div> </div> </div> <div> <ul> <li><img src="https://www.jb51.net/article/img/068.png"></li> </ul> </div> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.charfirst.pinyin.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/sort.js"></script> </body> </html>
style.css
html,body,div,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;} ul li{list-style: none;} a{text-decoration: none;cursor: pointer;} html{height: 100%;} body{height: 100%;background: #f5f5f5;position: relative;font-family: '微软雅黑';max-width: 640px;margin:auto;} a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);} header{ width:100%; height: 45px; background: #ececea; border-bottom: 1px solid #ddd; } header.fixed{ position: fixed; left: 0; top: 0; z-index: 99; } .header{ margin:0 20px; text-align: center; color: #4e4a49; font-size: 1em; height: 45px; line-height: 45px; position: relative; } #letter{ width: 100px; height: 100px; border-radius: 5px; font-size: 75px; color: #555; text-align: center; line-height: 100px; background: rgba(145,145,145,0.6); position: fixed; left: 50%; top: 50%; margin:-50px 0px 0px -50px; z-index: 99; display: none; } #letter img{ width: 50px; height: 50px; float: left; margin:25px 0px 0px 25px; } .sort_box{ width: 100%; padding-top: 45px; overflow: hidden; } .sort_list{ padding:10px 60px 10px 80px; position: relative; height: 40px; line-height: 40px; border-bottom:1px solid #ddd; } .sort_list .num_logo{ width: 50px; height: 50px; border-radius: 10px; overflow: hidden; position: absolute; top: 5px; left: 20px; } .sort_list .num_logo img{ width: 50px; height: 50px; } .sort_list .num_name{ color: #000; } .sort_letter{ background-color: white; height: 30px; line-height: 30px; padding-left: 20px; color:#787878; font-size: 14px; border-bottom:1px solid #ddd; } .initials{ position: fixed; top: 47px; right: 0px; height: 100%; width: 15px; padding-right: 10px; text-align: center; font-size: 12px; z-index: 99; background: rgba(145,145,145,0); } .initials li img{ width: 14px; }
sort.js