城市選擇-移動端-點選首字母定位到當前城市

阿新 • • 發佈：2018-11-13

一、html程式碼

<!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:70%;}
.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 id="showLetter" class="showLetter">A</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:;">D</a></li>
 <li><a href="javascript:;">E</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:;">I</a></li>
 <li><a href="javascript:;">J</a></li>
 <li><a href="javascript:;">K</a></li>
 <li><a href="javascript:;">L</a></li>
 <li><a href="javascript:;">M</a></li>
 <li><a href="javascript:;">N</a></li>
 <li><a href="javascript:;">O</a></li>
 <li><a href="javascript:;">P</a></li>
 <li><a href="javascript:;">Q</a></li>
 <li><a href="javascript:;">R</a></li>
 <li><a href="javascript:;">S</a></li>
 <li><a href="javascript:;">T</a></li>
 <li><a href="javascript:;">U</a></li>
 <li><a href="javascript:;">V</a></li>
 <li><a href="javascript:;">W</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">A
 鞍山市
 阿拉善盟
 安慶市
 安陽市
 阿里地區
 安康市
 安順市
 阿壩藏族羌族自治州
 阿拉爾市
 阿克蘇地區
 澳門特別行政區
 阿勒泰地區
 </div>
 <div class="city-list">B
 白城市
 包頭市
 巴彥淖爾市
 保定市
 本溪市
 白山市
 亳州市
 蚌埠市
 濱州市
 白銀市
 寶雞市
 保山市
 白沙黎族自治縣
 百色市
 畢節市
 北海市
 巴中市
 保亭黎族苗族自治縣
 巴音郭楞蒙古自治州
 博爾塔拉蒙古自治州
 北京市
 </div>
 <div class="city-list">C
 長治市
 滄州市
 常州市
 慈溪市
 常熟市
 承德市
 赤峰市
 長春市
 郴州市
 長沙市
 滁州市
 常德市
 巢湖市
 池州市
 澄邁縣
 崇左市
 昌江黎族自治縣
 楚雄彝族自治州
 潮州市
 重慶市
 成都市
 昌都地區
 昌吉回族自治州
 </div>
 <div class="city-list">D
 大興安嶺地區
 大同市
 大慶市
 丹陽市
 大連市
 丹東市
 東營市
 德州市
 達州市
 大理白族自治州
 儋州市
 定安縣
 迪慶藏族自治州
 德陽市
 東方市
 德巨集傣族景頗族自治州
 東莞市
 定西市
 </div>
 <div class="city-list">E
 鄂爾多斯市
 鄂州市
 恩施土家族苗族自治州
 </div>
 <div class="city-list">F
 阜新市
 撫順市
 福清市
 阜陽市
 肥城市
 撫州市
 福州市
 佛山市
 防城港市
 </div>
 <div class="city-list">G
 廣州市
 贛州市
 廣元市
 廣安市
 桂林市
 貴港市
 貴陽市
 甘孜藏族自治州
 甘南藏族自治州
 固原市
 果洛藏族自治州
 </div>
 <div class="city-list">H
 黑河市
 葫蘆島市
 海寧市
 淮安市
 衡水市
 呼和浩特市
 湖州市
 鶴崗市
 呼倫貝爾市
 哈爾濱市
 邯鄲市
 杭州市
 鶴壁市
 菏澤市
 黃石市
 懷化市
 淮北市
 黃岡市
 衡陽市
 合肥市
 淮南市
 黃山市
 河池市
 海口市
 河源市
 紅河哈尼族彝族自治州
 惠州市
 漢中市
 賀州市
 海西蒙古族藏族自治州
 海東市
 黃南藏族自治州
 哈密地區
 海北藏族自治州
 和田地區
 海南藏族自治州
 </div>
 <div class="city-list">J
 錦州市
 金華市
 晉中市
 江陰市
 吉林市
 佳木斯市
 雞西市
 嘉興市
 晉城市
 晉江市
 即墨市
 吉安市
 濟南市
 荊門市
 焦作市
 濟寧市
 濟源市
 荊州市
 九江市
 景德鎮市
 揭陽市
 金昌市
 江門市
 嘉峪關市
 酒泉市
 </div>
 <div class="city-list">K
 崑山市
 開封市
 昆明市
 克拉瑪依市
 克孜勒蘇柯爾克孜自治州
 喀什地區
 </div>
 <div class="city-list">L
 臨汾市
 廊坊市
 遼陽市
 遼源市
 呂梁市
 連雲港市
 萊蕪市
 漯河市
 麗水市
 六安市
 婁底市
 龍巖市
 龍口市
 臨沂市
 洛陽市
 聊城市
 麗江市
 來賓市
 瀘州市
 臨滄市
 樂東黎族自治縣
 樂山市
 蘭州市
 柳州市
 涼山彝族自治州
 陵水黎族自治縣
 林芝地區
 臨高縣
 拉薩市
 六盤水市
 隴南市
 臨夏回族自治州
 </div>
 <div class="city-list">M
 牡丹江市
 馬鞍山市
 綿陽市
 眉山市
 茂名市
 梅州市
 </div>
 <div class="city-list">N
 南京市
 寧波市
 南通市
 南昌市
 南陽市
 南平市
 寧德市
 南安市
 那曲地區
 南寧市
 南充市
 內江市
 怒江傈僳族自治州
 </div>
 <div class="city-list">P
 盤錦市
 萍鄉市
 平頂山市
 濮陽市
 莆田市
 攀枝花市
 普洱市
 平涼市
 </div>
 <div class="city-list">Q
 秦皇島市
 齊齊哈爾市
 七臺河市
 泉州市
 潛江市
 青島市
 衢州市
 清遠市
 黔南布依族苗族自治州
 欽州市
 曲靖市
 黔西南布依族苗族自治州
 慶陽市
 黔東南苗族侗族自治州
 瓊海市
 瓊中黎族苗族自治縣
 </div>
 <div class="city-list">R
 如皋市
 榮成市
 日照市
 日喀則市
 </div>
 <div class="city-list">S
 四平市
 綏化市
 松原市
 蘇州市
 上海市
 宿遷市
 紹興市
 朔州市
 雙鴨山市
 瀋陽市
 上虞市
 石家莊市
 汕頭市
 三明市
 神農架林區
 上饒市
 商丘市
 隨州市
 宿州市
 三門峽市
 十堰市
 深圳市
 邵陽市
 韶關市
 汕尾市
 遂寧市
 商洛市
 山南地區
 三亞市
 石嘴山市
 石河子市
 </div>
 <div class="city-list">T
 太原市
 鐵嶺市
 通化市
 唐山市
 太倉市
 天津市
 泰州市
 通遼市
 台州市
 泰安市
 天門市
 銅陵市
 銅仁市
 屯昌縣
 銅川市
 天水市
 塔城地區
 圖木舒克市
 吐魯番地區
 臺灣
 </div>
 <div class="city-list">W
 溫州市
 無錫市
 烏蘭察布市
 烏海市
 蕪湖市
 武漢市
 濰坊市
 威海市
 萬寧市
 渭南市
 文昌市
 五指山市
 武威市
 梧州市
 文山壯族苗族自治州
 五家渠市
 吳忠市
 烏魯木齊市
 </div>
 <div class="city-list">X
 忻州市
 錫林郭勒盟
 邢臺市
 興安盟
 徐州市
 新鄉市
 襄陽市
 新餘市
 信陽市
 仙桃市
 許昌市
 湘潭市
 廈門市
 宣城市
 孝感市
 咸寧市
 湘西土家族苗族自治州
 西安市
 咸陽市
 西雙版納傣族自治州
 西寧市
 香港特別行政區
 </div>
 <div class="city-list">Y
 宜興市
 延邊朝鮮族自治州
 揚州市
 運城市
 鹽城市
 陽泉市
 餘姚市
 伊春市
 營口市
 煙臺市
 宜昌市
 岳陽市
 宜春市
 益陽市
 義烏市
 鷹潭市
 永州市
 玉林市
 雅安市
 玉溪市
 陽江市
 榆林市
 宜賓市
 雲浮市
 延安市
 伊犁哈薩克自治州
 銀川市
 玉樹藏族自治州
 </div>
 <div class="city-list">Z
 張家口市
 諸暨市
 鎮江市
 張家港市
 朝陽市
 張家界市
 鄭州市
 棗莊市
 舟山市
 增城市
 珠海市
 周口市
 淄博市
 株洲市
 漳州市
 駐馬店市
 湛江市
 遵義市
 自貢市
 昭通市
 肇慶市
 中山市
 張掖市
 資陽市
 中衛市
 </div>
</div>
</div>
<script src="/jquery/jquery-1.10.2.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/26;
 letter.find('li').height(LiHeight);
 letter.find('li').css("line-height",LiHeight+"px");
})

</script>
</body>
</html>

城市選擇-移動端-點選首字母定位到當前城市

一、html程式碼 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta na

手機(移動端)點選事件失效問題

1.問題重現：微信ios內建瀏覽器認為，不是button a標籤之外的非點選元素比如div 是不可點選的，比如給div綁了click事件在微信裡邊是不生效的，解決辦法是給這個div元素新增一個樣式屬性cursor: poi

熊掌號推出，移動端更顯重要，怎麽選擇移動端關鍵詞

移動SEO SEO優化熊掌號 2017年對於SEO重大的改變就是搜索的重心從PC端向移動端傾斜，我們都知道在熊掌號推出以後，移動端變的更加重要，並且移動端索引優先PC端，從流量結構的表現來看，移動端的流量也遠遠超過PC端。我們很清楚，網站優化的開始，往往來源於關鍵詞優化，那麽移動端關鍵詞我們該

火車票飛機票，點選切換按鈕切換出發城市和到達城市

如圖，點選中間的切換圖示，切換左右兩邊的城市，並且帶有動畫效果只要利用css的特性transition和js的方法toggleClass就可以啦，具體操作如下： <div class="con"> <div class="choose-ci

選擇 Android studio 點選 “run” 按鈕時執行的版本

Android studio 使用了多渠道打包，但是在連線手機進行除錯時，發現點選“run”按鈕，執行的不是你需要的預設版本，這時需要這樣操作：點選Android studio 左下角位置的：“Build Variants”，找到你的app專案，然後點選後面的，選擇你需要的版本

PC端——點選檢視大圖

1、html佈局： <a href="{{ d.img_url }}" data-lightbox="roadtrip" data-field="img_url" class="lightbox_style doctor_image"> <

移動開發---點選2次返回退出

private long Current = 0; public void onBackPressed() { if (System.currentTimeMillis() - Current > 2000) { Current = System

c#控制windows 滑鼠移動、點選和輸入

首先可以使用ViewWizard獲取視窗的類名和Title 圖中：視窗標題和視窗類名，可以使用下面的程式獲取視窗的控制代碼。 MouseHookHelper 滑鼠相關的函式 using System; using System.Collections.Gen

手指拖動小球移動，點選空白處，小球不跟著移動

package com.example.xxx.circle; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import and

點選事件，選擇按鈕，點選從前端傳到後臺，查詢資料，並返回前段，顯示出來。---tp5

//這是HTML頁面 <div class="form-group"> <label class="col-sm-3">聽讀寫說分類</label>

移動頁面點選穿透問題解決方案

核心程式碼：<div class="content"><div id="underLayer"> <a href="www.baidu.com">連結</a> <input type="text" class="text1" > <inp

Javascript小知識點（五）：移動端控制點選別的地方，隱藏頁面彈框

在PC端實現思路是這樣的為document新增點選事件判斷點選的引數 event.target中是否包含該彈框相關的div 如果包含，則不作任何操作如果不包含，則直接設定該div隱藏程式碼如

移動web點選事件touch和事件物件--常用知識點解析

解釋touch touch是移動端的觸控事件而且是一組事件 touchstart 當手指觸控式螢幕幕的時候觸發 touchmove 當手指在螢幕上滑動時觸發:move事件是持續觸發 touchend 當手指離開螢幕的時候觸發 touchcancel 當被

iOS移動View點選事件

在做開發的時候發現移動中的view不能點選，在網上找了很久之後自己寫了一個移動的view點選事件，希望對大家有幫助廢話不多說，直接開始。新建工程，先刪除檔案中的ViewController.h和ViewController.m檔案，新建MoveViewControlle

移動web點選事件--tap的封裝

基礎知識點的瞭解 https://blog.csdn.net/weixin_41105030/article/details/85763149 先來看一個例子，和我封裝的tap程式碼 HTML <ul> <li class="">熱門推薦

WebUploader 選擇圖片按鈕點選無效問題

專案中使用WebUploader做的圖片上傳功能，出現一個奇怪的問題，就是頁面第一次載入完成之後，點選瀏覽檔案的按鈕沒有反應。以下是參考網上的一些說法：問題的原因大體是這樣，WebUploader初始化的時候，封裝了一個input，type=‘file’。瀏覽檔案

Android中webview無法彈出檔案選擇框，點選按鈕沒反應的問題

以前寫的專案時，遇到過這樣一個問題，在ios和微信都可以，就是android不行，尷尬的，無論你多使勁點都發現無法彈出安卓原生檔案選擇介面，簡直要崩潰了最後通過一番資料查詢，發現要重寫WebChrome

WindowManager實現可移動可點選(可只在應用中顯示)懸浮窗

概述最近專案中要求在每個介面加個客服懸浮窗，點選可以進入網易七魚的聊天視窗，於是研究了下WindowManager新增懸浮窗的功能。實現要實現懸浮窗功能首先在清單檔案中給予相應許可權： <uses-permission android

android TV 通過按鍵控制RecyclerView中的item的選中，移動，點選功能

前言 android tv開發中常常會用到recyclerview展示內容，並且要處理好按鍵控制item的選中，移動，點選功能，會遇到失去焦點，recyclerview 獲取childView獲取不到，出現null的問題。下面介紹的一種方法，可以很方便的實現上

自定義的可以移動和點選的ImageView

1.話不多說直接上程式碼：（this指的是控制元件本身） @SuppressLint("AppCompatCustomView") public class ToucherActionIcon extends ImageView{ private OnMyListe

城市選擇-移動端-點選首字母定位到當前城市

相關推薦