如何實(shí)現(xiàn)jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器

這篇文章將為大家詳細(xì)講解有關(guān)如何實(shí)現(xiàn)jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

用到城市選擇，直接用拼音滑動(dòng)方式來選擇，用的時(shí)候引入jquery（個(gè)別樣式需要自己修改）

<div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div>

<!--省份列表-->
<div class="dzhc_xs">
 <nav>
  <div class="dhjt">
   <a href="JavaScrip:;" rel="external nofollow" class="yy_gb"><!--<img src="images/dhjt.png" alt="">--></a>
   <span>全部地址</span>
  </div>
 </nav>
 <!--顯示點(diǎn)擊的是哪一個(gè)字母-->
 <div id="showLetter" class="showLetter"><span>當(dāng)前</span></div>
 <!--城市索引查詢-->
 <div class="letter">
  <ul>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="present">當(dāng)前</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="hot">熱門</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="A">A</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="B">B</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="C">C</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="D">D</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="E">E</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="F">F</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="G">G</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="H">H</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="J">J</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="K">K</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="L">L</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="M">M</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="N">N</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="P">P</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="Q">Q</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="R">R</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="S">S</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="T">T</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="W">W</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="X">X</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="Y">Y</a></li>
   <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-html="Z">Z</a></li>
  </ul>
 </div>
 <!--城市列表-->
 <div class="contai">
  <div class="city">
   <div class="city-list"><span class="city-letter" id="present1">當(dāng)前城市</span>
    <p data-id="210300">徐州市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="hot1">熱門城市</span>
    <p data-id="210300">北京市</p>
    <p data-id="152900">上海市</p>
    <p data-id="340800">云南</p>
    <p data-id="410500">四川</p>
    <p data-id="542500">濟(jì)南</p>
    <p data-id="610900">青島</p>
   </div>
   <div class="city-list"><span class="city-letter" id="A1">A</span>
    <p data-id="210300">鞍山市</p>
    <p data-id="152900">阿拉善盟</p>
    <p data-id="340800">安慶市</p>
    <p data-id="410500">安陽市</p>
    <p data-id="542500">阿里地區(qū)</p>
    <p data-id="610900">安康市</p>
    <p data-id="520400">安順市</p>
    <p data-id="513200">阿壩藏族羌族自治州</p>
    <p data-id="659002">阿拉爾市</p>
    <p data-id="652900">阿克蘇地區(qū)</p>
    <p data-id="820100">澳門特別行政區(qū)</p>
    <p data-id="654300">阿勒泰地區(qū)</p>
   </div>
   <div class="city-list"><span class="city-letter" id="B1">B</span>
    <p data-id="220800">白城市</p>
    <p data-id="150200">包頭市</p>
    <p data-id="150800">巴彥淖爾市</p>
    <p data-id="130600">保定市</p>
    <p data-id="210500">本溪市</p>
    <p data-id="220600">白山市</p>
    <p data-id="341600">亳州市</p>
    <p data-id="340300">蚌埠市</p>
    <p data-id="371600">濱州市</p>
    <p data-id="620400">白銀市</p>
    <p data-id="610300">寶雞市</p>
    <p data-id="530500">保山市</p>
    <p data-id="469030">白沙黎族自治縣</p>
    <p data-id="451000">百色市</p>
    <p data-id="522401">畢節(jié)市</p>
    <p data-id="450500">北海市</p>
    <p data-id="511900">巴中市</p>
    <p data-id="469035">保亭黎族苗族自治縣</p>
    <p data-id="652800">巴音郭楞蒙古自治州</p>
    <p data-id="652700">博爾塔拉蒙古自治州</p>
    <p data-id="110100">北京市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="C1">C</span>
    <p data-id="140400">長(zhǎng)治市</p>
    <p data-id="130900">滄州市</p>
    <p data-id="320400">常州市</p>
    <p data-id="330282">慈溪市</p>
    <p data-id="320581">常熟市</p>
    <p data-id="130800">承德市</p>
    <p data-id="150400">赤峰市</p>
    <p data-id="220100">長(zhǎng)春市</p>
    <p data-id="431000">郴州市</p>
    <p data-id="430100">長(zhǎng)沙市</p>
    <p data-id="341100">滁州市</p>
    <p data-id="430700">常德市</p>
    <p data-id="341400">巢湖市</p>
    <p data-id="341700">池州市</p>
    <p data-id="469027">澄邁縣</p>
    <p data-id="451400">崇左市</p>
    <p data-id="469031">昌江黎族自治縣</p>
    <p data-id="532300">楚雄彝族自治州</p>
    <p data-id="445100">潮州市</p>
    <p data-id="500100">重慶市</p>
    <p data-id="510100">成都市</p>
    <p data-id="542100">昌都地區(qū)</p>
    <p data-id="652300">昌吉回族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="D1">D</span>
    <p data-id="232700">大興安嶺地區(qū)</p>
    <p data-id="140200">大同市</p>
    <p data-id="230600">大慶市</p>
    <p data-id="321181">丹陽市</p>
    <p data-id="210200">大連市</p>
    <p data-id="210600">丹東市</p>
    <p data-id="370500">東營(yíng)市</p>
    <p data-id="371400">德州市</p>
    <p data-id="511700">達(dá)州市</p>
    <p data-id="532900">大理白族自治州</p>
    <p data-id="469003">儋州市</p>
    <p data-id="469025">定安縣</p>
    <p data-id="533400">迪慶藏族自治州</p>
    <p data-id="510600">德陽市</p>
    <p data-id="469007">東方市</p>
    <p data-id="533100">德宏傣族景頗族自治州</p>
    <p data-id="441900">東莞市</p>
    <p data-id="621100">定西市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="E1">E</span>
    <p data-id="150600">鄂爾多斯市</p>
    <p data-id="420700">鄂州市</p>
    <p data-id="422800">恩施土家族苗族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="F1">F</span>
    <p data-id="210900">阜新市</p>
    <p data-id="210400">撫順市</p>
    <p data-id="350181">福清市</p>
    <p data-id="341200">阜陽市</p>
    <p data-id="370983">肥城市</p>
    <p data-id="361000">撫州市</p>
    <p data-id="350100">福州市</p>
    <p data-id="440600">佛山市</p>
    <p data-id="450600">防城港市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="G1">G</span>
    <p data-id="440100">廣州市</p>
    <p data-id="360700">贛州市</p>
    <p data-id="510800">廣元市</p>
    <p data-id="511600">廣安市</p>
    <p data-id="450300">桂林市</p>
    <p data-id="450800">貴港市</p>
    <p data-id="520100">貴陽市</p>
    <p data-id="513300">甘孜藏族自治州</p>
    <p data-id="623000">甘南藏族自治州</p>
    <p data-id="640400">固原市</p>
    <p data-id="632600">果洛藏族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="H1">H</span>
    <p data-id="231100">黑河市</p>
    <p data-id="211400">葫蘆島市</p>
    <p data-id="330481">海寧市</p>
    <p data-id="320800">淮安市</p>
    <p data-id="131100">衡水市</p>
    <p data-id="150100">呼和浩特市</p>
    <p data-id="330500">湖州市</p>
    <p data-id="230400">鶴崗市</p>
    <p data-id="150700">呼倫貝爾市</p>
    <p data-id="230100">哈爾濱市</p>
    <p data-id="130400">邯鄲市</p>
    <p data-id="330100">杭州市</p>
    <p data-id="410600">鶴壁市</p>
    <p data-id="371700">菏澤市</p>
    <p data-id="420200">黃石市</p>
    <p data-id="431200">懷化市</p>
    <p data-id="340600">淮北市</p>
    <p data-id="421100">黃岡市</p>
    <p data-id="430400">衡陽市</p>
    <p data-id="340100">合肥市</p>
    <p data-id="340400">淮南市</p>
    <p data-id="341000">黃山市</p>
    <p data-id="451200">河池市</p>
    <p data-id="460100">海口市</p>
    <p data-id="441600">河源市</p>
    <p data-id="532500">紅河哈尼族彝族自治州</p>
    <p data-id="441300">惠州市</p>
    <p data-id="610700">漢中市</p>
    <p data-id="451100">賀州市</p>
    <p data-id="632800">海西蒙古族藏族自治州</p>
    <p data-id="632100">海東市</p>
    <p data-id="632300">黃南藏族自治州</p>
    <p data-id="652200">哈密地區(qū)</p>
    <p data-id="632200">海北藏族自治州</p>
    <p data-id="653200">和田地區(qū)</p>
    <p data-id="632500">海南藏族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="J1">J</span>
    <p data-id="210700">錦州市</p>
    <p data-id="330700">金華市</p>
    <p data-id="140700">晉中市</p>
    <p data-id="320281">江陰市</p>
    <p data-id="220200">吉林市</p>
    <p data-id="230800">佳木斯市</p>
    <p data-id="230300">雞西市</p>
    <p data-id="330400">嘉興市</p>
    <p data-id="140500">晉城市</p>
    <p data-id="350582">晉江市</p>
    <p data-id="370282">即墨市</p>
    <p data-id="360800">吉安市</p>
    <p data-id="370100">濟(jì)南市</p>
    <p data-id="420800">荊門市</p>
    <p data-id="410800">焦作市</p>
    <p data-id="370800">濟(jì)寧市</p>
    <p data-id="410881">濟(jì)源市</p>
    <p data-id="421000">荊州市</p>
    <p data-id="360400">九江市</p>
    <p data-id="360200">景德鎮(zhèn)市</p>
    <p data-id="445200">揭陽市</p>
    <p data-id="620300">金昌市</p>
    <p data-id="440700">江門市</p>
    <p data-id="620200">嘉峪關(guān)市</p>
    <p data-id="620900">酒泉市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="K1">K</span>
    <p data-id="320583">昆山市</p>
    <p data-id="410200">開封市</p>
    <p data-id="530100">昆明市</p>
    <p data-id="650200">克拉瑪依市</p>
    <p data-id="653000">克孜勒蘇柯爾克孜自治州</p>
    <p data-id="653100">喀什地區(qū)</p>
   </div>
   <div class="city-list"><span class="city-letter" id="L1">L</span>
    <p data-id="141000">臨汾市</p>
    <p data-id="131000">廊坊市</p>
    <p data-id="211000">遼陽市</p>
    <p data-id="220400">遼源市</p>
    <p data-id="141100">呂梁市</p>
    <p data-id="320700">連云港市</p>
    <p data-id="371200">萊蕪市</p>
    <p data-id="411100">漯河市</p>
    <p data-id="331100">麗水市</p>
    <p data-id="341500">六安市</p>
    <p data-id="431300">婁底市</p>
    <p data-id="350800">龍巖市</p>
    <p data-id="370681">龍口市</p>
    <p data-id="371300">臨沂市</p>
    <p data-id="410300">洛陽市</p>
    <p data-id="371500">聊城市</p>
    <p data-id="530700">麗江市</p>
    <p data-id="451300">來賓市</p>
    <p data-id="510500">瀘州市</p>
    <p data-id="530900">臨滄市</p>
    <p data-id="469033">樂東黎族自治縣</p>
    <p data-id="511100">樂山市</p>
    <p data-id="620100">蘭州市</p>
    <p data-id="450200">柳州市</p>
    <p data-id="513400">涼山彝族自治州</p>
    <p data-id="469034">陵水黎族自治縣</p>
    <p data-id="542600">林芝地區(qū)</p>
    <p data-id="469028">臨高縣</p>
    <p data-id="540100">拉薩市</p>
    <p data-id="520200">六盤水市</p>
    <p data-id="621200">隴南市</p>
    <p data-id="622900">臨夏回族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="M1">M</span>
    <p data-id="231000">牡丹江市</p>
    <p data-id="340500">馬鞍山市</p>
    <p data-id="510700">綿陽市</p>
    <p data-id="511400">眉山市</p>
    <p data-id="440900">茂名市</p>
    <p data-id="441400">梅州市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="N1">N</span>
    <p data-id="320100">南京市</p>
    <p data-id="330200">寧波市</p>
    <p data-id="320600">南通市</p>
    <p data-id="360100">南昌市</p>
    <p data-id="411300">南陽市</p>
    <p data-id="350700">南平市</p>
    <p data-id="350900">寧德市</p>
    <p data-id="350583">南安市</p>
    <p data-id="542400">那曲地區(qū)</p>
    <p data-id="450100">南寧市</p>
    <p data-id="511300">南充市</p>
    <p data-id="511000">內(nèi)江市</p>
    <p data-id="533300">怒江傈僳族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="P1">P</span>
    <p data-id="211100">盤錦市</p>
    <p data-id="360300">萍鄉(xiāng)市</p>
    <p data-id="410400">平頂山市</p>
    <p data-id="410900">濮陽市</p>
    <p data-id="350300">莆田市</p>
    <p data-id="510400">攀枝花市</p>
    <p data-id="530800">普洱市</p>
    <p data-id="620800">平?jīng)鍪?lt;/p>
   </div>
   <div class="city-list"><span class="city-letter" id="Q1">Q</span>
    <p data-id="130300">秦皇島市</p>
    <p data-id="230200">齊齊哈爾市</p>
    <p data-id="230900">七臺(tái)河市</p>
    <p data-id="350500">泉州市</p>
    <p data-id="429005">潛江市</p>
    <p data-id="370200">青島市</p>
    <p data-id="330800">衢州市</p>
    <p data-id="441800">清遠(yuǎn)市</p>
    <p data-id="522700">黔南布依族苗族自治州</p>
    <p data-id="450700">欽州市</p>
    <p data-id="530300">曲靖市</p>
    <p data-id="522300">黔西南布依族苗族自治州</p>
    <p data-id="621000">慶陽市</p>
    <p data-id="522600">黔東南苗族侗族自治州</p>
    <p data-id="469002">瓊海市</p>
    <p data-id="469036">瓊中黎族苗族自治縣</p>
   </div>
   <div class="city-list"><span class="city-letter" id="R1">R</span>
    <p data-id="320682">如皋市</p>
    <p data-id="371082">榮成市</p>
    <p data-id="371100">日照市</p>
    <p data-id="542301">日喀則市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="S1">S</span>
    <p data-id="220300">四平市</p>
    <p data-id="231200">綏化市</p>
    <p data-id="220700">松原市</p>
    <p data-id="320500">蘇州市</p>
    <p data-id="310100">上海市</p>
    <p data-id="321300">宿遷市</p>
    <p data-id="330600">紹興市</p>
    <p data-id="140600">朔州市</p>
    <p data-id="230500">雙鴨山市</p>
    <p data-id="210100">沈陽市</p>
    <p data-id="330682">上虞市</p>
    <p data-id="130100">石家莊市</p>
    <p data-id="440500">汕頭市</p>
    <p data-id="350400">三明市</p>
    <p data-id="429021">神農(nóng)架林區(qū)</p>
    <p data-id="361100">上饒市</p>
    <p data-id="411400">商丘市</p>
    <p data-id="421300">隨州市</p>
    <p data-id="341300">宿州市</p>
    <p data-id="411200">三門峽市</p>
    <p data-id="420300">十堰市</p>
    <p data-id="440300">深圳市</p>
    <p data-id="430500">邵陽市</p>
    <p data-id="440200">韶關(guān)市</p>
    <p data-id="441500">汕尾市</p>
    <p data-id="510900">遂寧市</p>
    <p data-id="611000">商洛市</p>
    <p data-id="542200">山南地區(qū)</p>
    <p data-id="460200">三亞市</p>
    <p data-id="640200">石嘴山市</p>
    <p data-id="659001">石河子市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="T1">T</span>
    <p data-id="140100">太原市</p>
    <p data-id="211200">鐵嶺市</p>
    <p data-id="220500">通化市</p>
    <p data-id="130200">唐山市</p>
    <p data-id="320585">太倉市</p>
    <p data-id="120100">天津市</p>
    <p data-id="321200">泰州市</p>
    <p data-id="150500">通遼市</p>
    <p data-id="331000">臺(tái)州市</p>
    <p data-id="370900">泰安市</p>
    <p data-id="429006">天門市</p>
    <p data-id="340700">銅陵市</p>
    <p data-id="522201">銅仁市</p>
    <p data-id="469026">屯昌縣</p>
    <p data-id="610200">銅川市</p>
    <p data-id="620500">天水市</p>
    <p data-id="654200">塔城地區(qū)</p>
    <p data-id="659003">圖木舒克市</p>
    <p data-id="652100">吐魯番地區(qū)</p>
    <p data-id="710100">臺(tái)灣</p>
   </div>
   <div class="city-list"><span class="city-letter" id="W1">W</span>
    <p data-id="330300">溫州市</p>
    <p data-id="320200">無錫市</p>
    <p data-id="150900">烏蘭察布市</p>
    <p data-id="150300">烏海市</p>
    <p data-id="340200">蕪湖市</p>
    <p data-id="420100">武漢市</p>
    <p data-id="370700">濰坊市</p>
    <p data-id="371000">威海市</p>
    <p data-id="469006">萬寧市</p>
    <p data-id="610500">渭南市</p>
    <p data-id="469005">文昌市</p>
    <p data-id="469001">五指山市</p>
    <p data-id="620600">武威市</p>
    <p data-id="450400">梧州市</p>
    <p data-id="532600">文山壯族苗族自治州</p>
    <p data-id="659004">五家渠市</p>
    <p data-id="640300">吳忠市</p>
    <p data-id="650100">烏魯木齊市</p>
   </div>
   <div class="city-list"><span class="city-letter" id="X1">X</span>
    <p data-id="140900">忻州市</p>
    <p data-id="152500">錫林郭勒盟</p>
    <p data-id="130500">邢臺(tái)市</p>
    <p data-id="152200">興安盟</p>
    <p data-id="320300">徐州市</p>
    <p data-id="410700">新鄉(xiāng)市</p>
    <p data-id="420600">襄陽市</p>
    <p data-id="360500">新余市</p>
    <p data-id="411500">信陽市</p>
    <p data-id="429004">仙桃市</p>
    <p data-id="411000">許昌市</p>
    <p data-id="430300">湘潭市</p>
    <p data-id="350200">廈門市</p>
    <p data-id="341800">宣城市</p>
    <p data-id="420900">孝感市</p>
    <p data-id="421200">咸寧市</p>
    <p data-id="433100">湘西土家族苗族自治州</p>
    <p data-id="610100">西安市</p>
    <p data-id="610400">咸陽市</p>
    <p data-id="532800">西雙版納傣族自治州</p>
    <p data-id="630100">西寧市</p>
    <p data-id="810100">香港特別行政區(qū)</p>
   </div>
   <div class="city-list"><span class="city-letter" id="Y1">Y</span>
    <p data-id="320282">宜興市</p>
    <p data-id="222400">延邊朝鮮族自治州</p>
    <p data-id="321000">揚(yáng)州市</p>
    <p data-id="140800">運(yùn)城市</p>
    <p data-id="320900">鹽城市</p>
    <p data-id="140300">陽泉市</p>
    <p data-id="330281">余姚市</p>
    <p data-id="230700">伊春市</p>
    <p data-id="210800">營(yíng)口市</p>
    <p data-id="370600">煙臺(tái)市</p>
    <p data-id="420500">宜昌市</p>
    <p data-id="430600">岳陽市</p>
    <p data-id="360900">宜春市</p>
    <p data-id="430900">益陽市</p>
    <p data-id="330782">義烏市</p>
    <p data-id="360600">鷹潭市</p>
    <p data-id="431100">永州市</p>
    <p data-id="450900">玉林市</p>
    <p data-id="511800">雅安市</p>
    <p data-id="530400">玉溪市</p>
    <p data-id="441700">陽江市</p>
    <p data-id="610800">榆林市</p>
    <p data-id="511500">宜賓市</p>
    <p data-id="445300">云浮市</p>
    <p data-id="610600">延安市</p>
    <p data-id="654000">伊犁哈薩克自治州</p>
    <p data-id="640100">銀川市</p>
    <p data-id="632700">玉樹藏族自治州</p>
   </div>
   <div class="city-list"><span class="city-letter" id="Z1">Z</span>
    <p data-id="130700">張家口市</p>
    <p data-id="330681">諸暨市</p>
    <p data-id="321100">鎮(zhèn)江市</p>
    <p data-id="320582">張家港市</p>
    <p data-id="211300">朝陽市</p>
    <p data-id="430800">張家界市</p>
    <p data-id="410100">鄭州市</p>
    <p data-id="370400">棗莊市</p>
    <p data-id="330900">舟山市</p>
    <p data-id="440183">增城市</p>
    <p data-id="440400">珠海市</p>
    <p data-id="411600">周口市</p>
    <p data-id="370300">淄博市</p>
    <p data-id="430200">株洲市</p>
    <p data-id="350600">漳州市</p>
    <p data-id="411700">駐馬店市</p>
    <p data-id="440800">湛江市</p>
    <p data-id="520300">遵義市</p>
    <p data-id="510300">自貢市</p>
    <p data-id="530600">昭通市</p>
    <p data-id="441200">肇慶市</p>
    <p data-id="442000">中山市</p>
    <p data-id="620700">張掖市</p>
    <p data-id="512000">資陽市</p>
    <p data-id="640500">中衛(wèi)市</p>
   </div>
  </div>
 </div>
</div>


<script>
 $(function(){
  $(".yp_indz").click(function(){
   $(".dzhc_xs").addClass('on');
  });
  $(".yy_gb").click(function(){
   $(".dzhc_xs").removeClass('on');
  })
  //加載城市事件
  $('.container').show();
  //選擇城市 start
  $("body").on('click', '.city-list p', function () {
   $(".yp_indz em").text($(this).html());
   $(".dzhc_xs").removeClass("on");
  });
  //點(diǎn)擊索引查詢城市
  $("body").on('click', '.letter a', function () {
   var s = $(this).data("html");
   $(window).scrollTop($('#' + s + '1').offset().top);
   $("#showLetter span").html($(this).html());
   $("#showLetter").show().delay(500).hide(0);
  });
  //中間的標(biāo)記顯示
  /*$("body").on('onMouse', '.showLetter span', function () {
   $("#showLetter").show().delay(500).hide(0);
  });*/
 })

</script>

/*首頁省份選擇*/
.dzhc_xs {
 position: absolute;
 overflow: auto;
 top: 0;
 left: 0;
 background: #fff;
 width: 100%;
 display:none;
 z-index: 999999;
 overflow-x: hidden;
 overflow-y: scroll;
 height: 100%;
}
.dzhc_xs.on{display: block}
.showLetter {
 position: fixed;
 color: #00C7C7;
 width: 50px;
 height: 50px;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 border: #00C7C7 1px solid;
 text-align: center;
 display: none;
 margin-left: -26px;
 margin-top: -26px;
}
.showLetter span {
 width: 50px;
 height: 50px;
 line-height: 50px;
 font-size:2rem;
}
.letter {
 width: auto;
 position: fixed;
 top: 10%;
 right: 10px;
 text-align: center;
}
.letter ul {
 list-style-type: none;
}
.letter ul li a {
 text-decoration: none;
 color: #00C7C7;
 font-size: 1.6rem;
}
.contai {
 width: 100%;
 margin-top:0;
}
.city {
 width: 90%;
 overflow: hidden;
 padding: 20px;
 padding-top: 0;
 box-sizing:border-box;
}
.city-list {
 width: 100%;
}
.city-list .city-letter {
 font-size: 1.6rem;
 display: inline-block;
 padding-top: 15px;
 padding-bottom: 5px;
 border-bottom: 1px solid #e8ecf1;
 width: 95%;
}
.city-list p {
 font-size: 1.3rem;
 color: #afafaf;
 width: 95%;
 height: 35px;
 line-height: 35px;
 border-bottom: 1px solid #e8ecf1;
 cursor: pointer;
}

最終效果圖

關(guān)于“如何實(shí)現(xiàn)jquery手機(jī)觸屏滑動(dòng)拼音字母城市選擇器”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。