最新消息:文章中包含代码时,请遵守代码高亮规范!

手机页面城市选择点击首字母定位到对应城市顶部【原创】

HTML+CSS Ann 998浏览 0评论

之前做的一个关于兼职的手机微信端的项目,有的也面要求我们实现选择城市的效果,主要就是点击城市的首字母定位到对应的城市顶端,这可把我难倒了,没做过啊,之前都是用的插件

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

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

2345截图20170106170952

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

编写静态页代码:


<div class="City-out">
<div class="city-title">当前定位 :<span class="city-now">芜湖市</span><i class="city-icon"></i></div>

<div class="city-sort">A</div>
<a name="city-first"></a>
<div class="cityList-box">
<ul>
<li>安吉市</li>
<li>安康市</li>
<li>安庆市</li>
<li>鞍山市</li>
</ul>
</div>
<div class="city-sort">B</div>
<a name="city-second"></a>
<div class="cityList-box">
<ul>
<li>蚌埠市</li>
<li>保定市</li>
<li>宝鸡市</li>
<li>包头市</li>
<li>蚌埠市</li>
<li>保定市</li>
<li>宝鸡市</li>
<li>包头市</li>
</ul>
</div>
<div class="city-sort">C</div>
<a name="city-third"></a>
<div class="cityList-box">
<ul>
<li>成都市</li>
<li>成都市</li>
<li>成都市</li>
<li>成都市</li>
<li>成都市</li>
</ul>
</div>
<div class="city-sort">D</div>
<a name="city-fourth"></a>
<div class="cityList-box">
<ul>
<li>大同市</li>
<li>大同市</li>
</ul>
</div>
<div class="city-sort">E</div>
<a name="city-fifth"></a>
<div class="cityList-box">
<ul>
<li>银城市</li>
<li>银城市</li>
<li>银城市</li>
<li>银城市</li>
<li>银城市</li>
</ul>
</div>
<div class="city-letter right-letter">
<ul>
<li><a href="javascript:;" data-name="city-first" class="nav-word-on">A</a></li>
<li><a href="javascript:;" data-name="city-second">B</a></li>
<li><a href="javascript:;" data-name="city-third">C</a></li>
<li><a href="javascript:;" data-name="city-fourth">D</a></li>
<li><a href="javascript:;" data-name="city-fifth">E</a></li>
<li><a href="javascript:;" data-name="city-sixth">F</a></li>
<li><a href="javascript:;" data-name="city-seventh">G</a></li>
<li><a href="javascript:;" data-name="city-eighth">H</a></li>
<li><a href="javascript:;" data-name="city-ninth">I</a></li>
<li><a href="javascript:;" data-name="city-tenth">J</a></li>
<li><a href="javascript:;" data-name="city-eleventh">K</a></li>
<li><a href="javascript:;" data-name="city-twelth">L</a></li>
<li><a href="javascript:;" data-name="city-thirteenth">M</a></li>
<li><a href="javascript:;" data-name="city-fourteenth">N</a></li>
<li><a href="javascript:;" data-name="city-fifteenth">O</a></li>
<li><a href="javascript:;" data-name="city-sixteenth">P</a></li>
<li><a href="javascript:;" data-name="city-seventeenth">Q</a></li>
<li><a href="javascript:;" data-name="city-eighteenth">R</a></li>
<li><a href="javascript:;" data-name="city-ninteenth">S</a></li>
<li><a href="javascript:;" data-name="city-twenty">T</a></li>
<li><a href="javascript:;" data-name="letter-first">U</a></li>
<li><a href="javascript:;" data-name="letter-second">V</a></li>
<li><a href="javascript:;" data-name="letter-third">W</a></li>
<li><a href="javascript:;" data-name="letter-fourth">X</a></li>
<li><a href="javascript:;" data-name="letter-fifth">Y</a></li>
<li><a href="javascript:;" data-name="letter-sixth">Z</a></li>
</ul>
</div>
</div>

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

2.引入js文件和编写js代码


<script src="js/anchor.js"></script>
<script>
$(function(){
//城市分类 锚点设置
var element = new Array("city-first","city-second","city-third","city-fourth","city-fifth","city-sixth","city-seventh",
"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");
$(function(){
nav_scroll(element);
});
$(window).scroll(function(){
nav_scroll(element);
});
})
</script>

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

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/19328.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者ann的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!