UDN-企业互联网技术人气社区

板块导航

浏览  : 1281
回复  : 2

[原生js] 手机页面城市选择点击首字母定位到对应城市顶部

[复制链接]
独领风骚的头像 楼主
发表于 2017-2-4 10:31:24 | 显示全部楼层 |阅读模式
  之前做的一个关于兼职的手机微信端的项目,有的也面要求我们实现选择城市的效果,主要就是点击城市的首字母定位到对应的城市顶端,这可把我难倒了,没做过啊,之前都是用的插件

  后来想到之前做公司的官网也要求点击新闻列表对应到相应的新闻位置,当时记得用的是锚点定位,我就把官网那个新闻页面拿过来又仔细看了一下,总结了主要的思路和实现方法,在官网页面的参考基础上,我试着去做了这个手机的页面,

  现在先给大家看看这个手机页面的样子
1.png

  现在就是要求点击右边的字母定位到相应的城市,通过锚点方法,又通过咨询同时==同事,老司机,大神,逐步实现了预期的效果具体的实现方法现在展示给大家

  编写静态页代码:
  1. <div class="City-out">
  2. <div class="city-title">当前定位 :<span class="city-now">芜湖市</span><i class="city-icon"></i></div>

  3. <div class="city-sort">A</div>
  4. <a name="city-first"></a>
  5. <div class="cityList-box">
  6. <ul>
  7. <li>安吉市</li>
  8. <li>安康市</li>
  9. <li>安庆市</li>
  10. <li>鞍山市</li>
  11. </ul>
  12. </div>
  13. <div class="city-sort">B</div>
  14. <a name="city-second"></a>
  15. <div class="cityList-box">
  16. <ul>
  17. <li>蚌埠市</li>
  18. <li>保定市</li>
  19. <li>宝鸡市</li>
  20. <li>包头市</li>
  21. <li>蚌埠市</li>
  22. <li>保定市</li>
  23. <li>宝鸡市</li>
  24. <li>包头市</li>
  25. </ul>
  26. </div>
  27. <div class="city-sort">C</div>
  28. <a name="city-third"></a>
  29. <div class="cityList-box">
  30. <ul>
  31. <li>成都市</li>
  32. <li>成都市</li>
  33. <li>成都市</li>
  34. <li>成都市</li>
  35. <li>成都市</li>
  36. </ul>
  37. </div>
  38. <div class="city-sort">D</div>
  39. <a name="city-fourth"></a>
  40. <div class="cityList-box">
  41. <ul>
  42. <li>大同市</li>
  43. <li>大同市</li>
  44. </ul>
  45. </div>
  46. <div class="city-sort">E</div>
  47. <a name="city-fifth"></a>
  48. <div class="cityList-box">
  49. <ul>
  50. <li>银城市</li>
  51. <li>银城市</li>
  52. <li>银城市</li>
  53. <li>银城市</li>
  54. <li>银城市</li>
  55. </ul>
  56. </div>
  57. <div class="city-letter right-letter">
  58. <ul>
  59. <li><a href="JavaScript:;" data-name="city-first" class="nav-word-on">A</a></li>
  60. <li><a href="JavaScript:;" data-name="city-second">B</a></li>
  61. <li><a href="JavaScript:;" data-name="city-third">C</a></li>
  62. <li><a href="JavaScript:;" data-name="city-fourth">D</a></li>
  63. <li><a href="JavaScript:;" data-name="city-fifth">E</a></li>
  64. <li><a href="JavaScript:;" data-name="city-sixth">F</a></li>
  65. <li><a href="JavaScript:;" data-name="city-seventh">G</a></li>
  66. <li><a href="JavaScript:;" data-name="city-eighth">H</a></li>
  67. <li><a href="JavaScript:;" data-name="city-ninth">I</a></li>
  68. <li><a href="JavaScript:;" data-name="city-tenth">J</a></li>
  69. <li><a href="JavaScript:;" data-name="city-eleventh">K</a></li>
  70. <li><a href="JavaScript:;" data-name="city-twelth">L</a></li>
  71. <li><a href="JavaScript:;" data-name="city-thirteenth">M</a></li>
  72. <li><a href="JavaScript:;" data-name="city-fourteenth">N</a></li>
  73. <li><a href="JavaScript:;" data-name="city-fifteenth">O</a></li>
  74. <li><a href="JavaScript:;" data-name="city-sixteenth">P</a></li>
  75. <li><a href="JavaScript:;" data-name="city-seventeenth">Q</a></li>
  76. <li><a href="JavaScript:;" data-name="city-eighteenth">R</a></li>
  77. <li><a href="JavaScript:;" data-name="city-ninteenth">S</a></li>
  78. <li><a href="JavaScript:;" data-name="city-twenty">T</a></li>
  79. <li><a href="JavaScript:;" data-name="letter-first">U</a></li>
  80. <li><a href="JavaScript:;" data-name="letter-second">V</a></li>
  81. <li><a href="JavaScript:;" data-name="letter-third">W</a></li>
  82. <li><a href="JavaScript:;" data-name="letter-fourth">X</a></li>
  83. <li><a href="JavaScript:;" data-name="letter-fifth">Y</a></li>
  84. <li><a href="JavaScript:;" data-name="letter-sixth">Z</a></li>
  85. </ul>
  86. </div>
  87. </div>
复制代码

  注:静态页编写的关键部分就是城市首字母里面的“ data-name”和城市列表里的相同

  2.引入js文件和编写js代码
  1. <script src="js/anchor.js"></script>
  2. <script>
  3. $(function(){
  4. //城市分类 锚点设置
  5. var element = new Array("city-first","city-second","city-third","city-fourth","city-fifth","city-sixth","city-seventh",
  6. "city-eighth","city-ninth","city-tenth","city-eleventh","city-twelth","city-thirteenth","city-fourteenth","city-fifteenth","city-seventeenth","city-eighteenth","city-ninteenth","city-twenty","letter-first","letter-second","letter-third","letter-fourth","letter-fifth","letter-sixth");
  7. $(function(){
  8. nav_scroll(element);
  9. });
  10. $(window).scroll(function(){
  11. nav_scroll(element);
  12. });
  13. })
  14. </script>
复制代码

  最后,关于页面的效果就根据自己的需要去定义吧

相关帖子

发表于 2017-2-4 10:31:56 | 显示全部楼层
经常看到”独领风骚“发帖,辛苦了
使用道具 举报

回复

发表于 2017-2-7 01:50:59 来自手机 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部