jquery手机触屏滑动拼音字母城市选择器的实例代码

前端之家收集整理的这篇文章主要介绍了jquery手机触屏滑动拼音字母城市选择器的实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改

北京

<div class="dzhc_xs">

当前

50200">包头市

40300">蚌埠市

40400">长治市

30100">长沙市

40400">固原市

30100">哈尔滨市

30100">杭州市

40400">淮南市

30100">昆明市

50200">克拉玛依市

50200">柳州市

301">日喀则市

30100">石家庄市

40300">深圳市

40300">吴忠市

50200">厦门市

30100">西宁市

40300">阳泉市

40400">珠海市

首页省份选择*/ .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; }

最终效果

以上这篇jquery手机触屏滑动拼音字母城市选择器的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/34783.html

猜你在找的jQuery相关文章