H5省或地區選擇
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>省或地區選擇</title>
<style type="text/css">
/*body,div,dl,dt,dd,ul,li,form,input,
button,h1,h2,h3,h4,h5,h6,p {
margin: 0 auto;
padding: 0;
font-family: "微軟雅黑";
color: #00C7C7
}*/
ul,li,dl,dt,dd {
display: block;
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.none {
display: none;
}
.loan_jm1 {
width: 94%;
margin: 0 auto;
}
.loan_jm_spa1 {
width: 39%;
height: 40px;
line-height: 40px;
font-size: 1em;
color: #666;
display: block;
float: left;
}
.loan_jm_l1 {
margin-top: 10px;
margin-bottom: 15px;
height: 40px;
}
.wbk_srn {
width: 57%;
height: 40px;
border: 1px solid #ccc;
background: #FFF;
float: left;
padding-left: 3%;
line-height: 40px;
color: #ADADAD;
font-size: 1.1em;
background-size: 45%;
background-position: center;
background: #fff;
}
.wbk_srn b {
width: 30px;
height: 40px;
border: 1px solid #ccc;
background: #FFF;
float: left;
padding-left: 3%;
line-height: 40px;
color: #ADADAD;
font-size: 1.1em;
}
/*顯示點選是哪個字母*/
.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;
}
.showLetter span {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
}
/*城市彈層*/
.container {
width: 90%;
}
.letter {
width: auto;
position: fixed;
top: 3%;
right: 10px;
text-align: center;
}
.letter ul {
list-style-type: none;
}
.letter ul li a {
text-decoration: none;
color: #00C7C7;
font-size: 12px
}
.city {
width: 90%;
overflow: hidden;
padding: 20px;
}
.city-list {
width: 100%;
}
.city-list .city-letter {
font-size: 20px;
display: inline-block;
padding-top: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #e8ecf1;
width: 100%;
}
.city-list p {
color: #afafaf;
width: 95%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #e8ecf1;
cursor: pointer;
}
.UISelect {
margin-top: 5px
}
</style>
</head>
<body>
<div class="select-province">
<!--顯示點選的是哪一個字母-->
<div id="showLetter" class="showLetter"><span>A</span></div>
<!--城市索引查詢-->
<div class="letter">
<ul>
<li>
<a href="javascript:;">A</a>
</li>
<li>
<a href="javascript:;">B</a>
</li>
<li>
<a href="javascript:;">C</a>
</li>
<li>
<a href="javascript:;">F</a>
</li>
<li>
<a href="javascript:;">G</a>
</li>
<li>
<a href="javascript:;">H</a>
</li>
<li>
<a href="javascript:;">J</a>
</li>
<li>
<a href="javascript:;">L</a>
</li>
<li>
<a href="javascript:;">N</a>
</li>
<li>
<a href="javascript:;">Q</a>
</li>
<li>
<a href="javascript:;">S</a>
</li>
<li>
<a href="javascript:;">T</a>
</li>
<li>
<a href="javascript:;">X</a>
</li>
<li>
<a href="javascript:;">Y</a>
</li>
<li>
<a href="javascript:;">Z</a>
</li>
</ul>
</div>
<div class="container">
<div class="city">
<div class="city-list"><span class="city-letter" id="A1">A</span>
<p data-id="220800">安徽(皖)</p>
<p data-id="150200">澳門特別行政區(澳)</p>
</div>
<div class="city-list"><span class="city-letter" id="B1">B</span>
<p data-id="110100">北京市（京）</p>
</div>
<div class="city-list"><span class="city-letter" id="C1">C</span>
<p data-id="232700">重慶(渝)</p>
</div>
<div class="city-list"><span class="city-letter" id="F1">F</span>
<p data-id="210900">福建省(閩)</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>
</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="211400">河南省(豫)</p>
<p data-id="330481">湖北省(鄂)</p>
<p data-id="320800">黑龍江省(黑)</p>
<p data-id="131100">湖南省(湘)</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>
</div>
<div class="city-list"><span class="city-letter" id="L1">L</span>
<p data-id="141000">遼寧省(遼) </p>
</div>
<div class="city-list"><span class="city-letter" id="N1">N</span>
<p data-id="320100">內蒙古自治區(蒙)</p>
<p data-id="330200">寧夏回族自治區(寧)</p>
</div>
<div class="city-list"><span class="city-letter" id="Q1">Q</span>
<p data-id="130300">青海省(青)</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="320500">四川省(川)</p>
</div>
<div class="city-list"><span class="city-letter" id="T1">T</span>
<p data-id="140100">臺灣省(臺)</p>
<p data-id="140100">天津市(津)</p>
</div>
<div class="city-list"><span class="city-letter" id="X1">X</span>
<p data-id="140900">西藏自治區(藏)</p>
<p data-id="140900">新疆維吾爾自治區(新)</p>
<p data-id="140900">香港特別行政區(港)</p>
</div>
<div class="city-list"><span class="city-letter" id="Y1">Y</span>
<p data-id="320282">雲南省(滇)</p>
</div>
<div class="city-list"><span class="city-letter" id="Z1">Z</span>
<p data-id="130700">浙江省(浙)</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery.1.10.1.min.js"></script>
<script type="text/javascript">
$(function() { //載入城市事件
$('.container').show();
//選擇城市 start
$('body').on('click', '.city-list p', function() {
alert($(this).html())
}); //點選索引查詢城市
$('body').on('click', '.letter a', function() {
var s = $(this).html();
$(window).scrollTop($('#' + s + '1').offset().top);
$("#showLetter span").html(s);
$("#showLetter").show().delay(500).hide(0);
}); //中間的標記顯示
$('body').on('onMouse', '.showLetter span', function() {
$("#showLetter").show().delay(500).hide(0);
});
var letter = $('.letter');
var windowHeight = $(window).height();
var InitHeight = windowHeight - 45;
letter.height(InitHeight);
var LiHeight = InitHeight / 15;
letter.find('li').height(LiHeight);
letter.find('li').css("line-height", LiHeight + "px");
})
</script>
</body>
</html>