Home Web Front-end JS Tutorial About mobile phone touch screen sliding function in jquery

About mobile phone touch screen sliding function in jquery

Jun 21, 2018 pm 04:52 PM
jquery City letter Pinyin slide Selector

The editor below will share with you an example code of the jquery mobile phone touch screen sliding pinyin letter city selector. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.

Today I use city selection, directly use the pinyin sliding method to select, and introduce jquery when using it (some styles need to be modified by yourself)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

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

 

<!--省份列表-->

<p class="dzhc_xs">

 <nav>

  <p class="dhjt">

   <a href="JavaScrip:;" rel="external nofollow" class="yy_gb"><!--<img src="images/dhjt.png" alt="">--></a>

   <span>全部地址</span>

  </p>

 </nav>

 <!--显示点击的是哪一个字母-->

 <p id="showLetter" class="showLetter"><span>当前</span></p>

 <!--城市索引查询-->

 <p 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">当前</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>

 </p>

 <!--城市列表-->

 <p class="contai">

  <p class="city">

   <p class="city-list"><span class="city-letter" id="present1">当前城市</span>

    <p data-id="210300">徐州市</p>

   </p>

   <p 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">济南</p>

    <p data-id="610900">青岛</p>

   </p>

   <p 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">阿里地区</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">阿克苏地区</p>

    <p data-id="820100">澳门特别行政区</p>

    <p data-id="654300">阿勒泰地区</p>

   </p>

   <p 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">毕节市</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>

   </p>

   <p class="city-list"><span class="city-letter" id="C1">C</span>

    <p data-id="140400">长治市</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">长春市</p>

    <p data-id="431000">郴州市</p>

    <p data-id="430100">长沙市</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">昌都地区</p>

    <p data-id="652300">昌吉回族自治州</p>

   </p>

   <p class="city-list"><span class="city-letter" id="D1">D</span>

    <p data-id="232700">大兴安岭地区</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">东营市</p>

    <p data-id="371400">德州市</p>

    <p data-id="511700">达州市</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>

   </p>

   <p 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>

   </p>

   <p 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>

   </p>

   <p 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>

   </p>

   <p 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">哈密地区</p>

    <p data-id="632200">海北藏族自治州</p>

    <p data-id="653200">和田地区</p>

    <p data-id="632500">海南藏族自治州</p>

   </p>

   <p 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">济南市</p>

    <p data-id="420800">荆门市</p>

    <p data-id="410800">焦作市</p>

    <p data-id="370800">济宁市</p>

    <p data-id="410881">济源市</p>

    <p data-id="421000">荆州市</p>

    <p data-id="360400">九江市</p>

    <p data-id="360200">景德镇市</p>

    <p data-id="445200">揭阳市</p>

    <p data-id="620300">金昌市</p>

    <p data-id="440700">江门市</p>

    <p data-id="620200">嘉峪关市</p>

    <p data-id="620900">酒泉市</p>

   </p>

   <p 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">喀什地区</p>

   </p>

   <p 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">林芝地区</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>

   </p>

   <p 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>

   </p>

   <p 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">那曲地区</p>

    <p data-id="450100">南宁市</p>

    <p data-id="511300">南充市</p>

    <p data-id="511000">内江市</p>

    <p data-id="533300">怒江傈僳族自治州</p>

   </p>

   <p class="city-list"><span class="city-letter" id="P1">P</span>

    <p data-id="211100">盘锦市</p>

    <p data-id="360300">萍乡市</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">平凉市</p>

   </p>

   <p 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">七台河市</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">清远市</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>

   </p>

   <p 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>

   </p>

   <p 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">神农架林区</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">韶关市</p>

    <p data-id="441500">汕尾市</p>

    <p data-id="510900">遂宁市</p>

    <p data-id="611000">商洛市</p>

    <p data-id="542200">山南地区</p>

    <p data-id="460200">三亚市</p>

    <p data-id="640200">石嘴山市</p>

    <p data-id="659001">石河子市</p>

   </p>

   <p 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">台州市</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">塔城地区</p>

    <p data-id="659003">图木舒克市</p>

    <p data-id="652100">吐鲁番地区</p>

    <p data-id="710100">台湾</p>

   </p>

   <p 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>

   </p>

   <p 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">邢台市</p>

    <p data-id="152200">兴安盟</p>

    <p data-id="320300">徐州市</p>

    <p data-id="410700">新乡市</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">香港特别行政区</p>

   </p>

   <p 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">扬州市</p>

    <p data-id="140800">运城市</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">营口市</p>

    <p data-id="370600">烟台市</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>

   </p>

   <p 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">镇江市</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">中卫市</p>

   </p>

  </p>

 </p>

</p>

 

 

<script>

 $(function(){

  $(".yp_indz").click(function(){

   $(".dzhc_xs").addClass(&#39;on&#39;);

  });

  $(".yy_gb").click(function(){

   $(".dzhc_xs").removeClass(&#39;on&#39;);

  })

  //加载城市事件

  $(&#39;.container&#39;).show();

  //选择城市 start

  $("body").on(&#39;click&#39;, &#39;.city-list p&#39;, function () {

   $(".yp_indz em").text($(this).html());

   $(".dzhc_xs").removeClass("on");

  });

  //点击索引查询城市

  $("body").on(&#39;click&#39;, &#39;.letter a&#39;, function () {

   var s = $(this).data("html");

   $(window).scrollTop($(&#39;#&#39; + s + &#39;1&#39;).offset().top);

   $("#showLetter span").html($(this).html());

   $("#showLetter").show().delay(500).hide(0);

  });

  //中间的标记显示

  /*$("body").on(&#39;onMouse&#39;, &#39;.showLetter span&#39;, function () {

   $("#showLetter").show().delay(500).hide(0);

  });*/

 })

 

</script>

Copy after login

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

/*首页省份选择*/

.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;

}

Copy after login

Final renderings

#The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What should you pay attention to when optimizing Vue projects?

Developed in a modular way in vuejs

How to implement the array update function in VUE

How to use vue-cli to implement multi-page applications

The above is the detailed content of About mobile phone touch screen sliding function in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1266
29
C# Tutorial
1239
24
Collect all treasure chests in Mingchao Jinzhou City Collect all treasure chests in Mingchao Jinzhou City Mar 16, 2024 pm 02:28 PM

There are many treasure chests in Mingchao Jinzhou City. Many players want to know where the treasure chests are. The editor has marked the locations of all the treasure chests. Players can just follow the marked numbers to find them one by one. Let’s take a look at this Mingchao article for details. The latest collection of all treasure chests in Jinzhou City. Mingchao Strategy Collection Mingchao Jinzhou City Treasure Box Collection Location 1: Jinzhou City (1-25) Twenty-five treasure boxes, five voice boxes Location 2: Jinzhou City (26-41) Fifteen treasure boxes, three A voice box, two flying hunters

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to remove the height attribute of an element with jQuery? How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

Introduction to how to add new rows to a table using jQuery Introduction to how to add new rows to a table using jQuery Feb 29, 2024 am 08:12 AM

jQuery is a popular JavaScript library widely used in web development. During web development, it is often necessary to dynamically add new rows to tables through JavaScript. This article will introduce how to use jQuery to add new rows to a table, and provide specific code examples. First, we need to introduce the jQuery library into the HTML page. The jQuery library can be introduced in the tag through the following code:

See all articles