移动端点击导航滑动展示全部选项,以为跳转页面定位到相应位置
项目需求,做手机端的时候导航栏可以左右滑动,并且点击某个导航的时候,需要滑动到屏幕中间,且在另一个页面跳转过来的时候定位到相应的位置。代码如下:
1.点击某个导航,需要滑动到屏幕中间
html:
<div class="top-box">
<ul id="active-li" class="active-li">
<li class="li-box1" id="box1">
<div class="img-txt1">历史</div>
<div class="img-nav-point"></div>
</li>
<li class="li-box2" id="box2">
<div class="img-txt1">文学</div>
<div class="img-nav-point"></div>
</li>
<li class="li-box3" id="box3">
<div class="img-txt1">小说</div>
<div class="img-nav-point"></div>
</li>
<li class="li-box4" id="box4">
<div class="img-txt1">教育</div>
<div class="img-nav-point"></div>
</li>
<li class="li-box5" id="box5">
<div class="img-txt1">人文社科</div>
<div class="img-nav-point"></div>
</li>
<li class="li-box6" id="box6">
<div class="img-txt1">影音记录</div>
<div class="img-nav-point"></div>
</li>
</ul>
</div>
CSS样式就根据自己的样式进行编写,这里就不写了
js:
<script>
/*点击导航*/
$("#active-li").on("click","li",function(e){
var moveX = $(this).position().left+$(this).parent().scrollLeft();
var pageX = document.documentElement.clientWidth;//设备的宽度
var blockWidth = $(this).width();
var left = moveX-(pageX/2)+(blockWidth/2);
$(".top-box").animate({scrollLeft:left},400); //注意这里写的是外面盒子的class,因为我写的是外面盒子左右滚动样式
$(this).addClass("active").siblings().removeClass("active"); //获取当前点击的元素$(this) ,并添加class;删除其他兄弟元素的样式
});
</script>
2.由一个页面跳转另一个页面锚点控制,跳转页面后定位到相应位置
第一个页面代码,在 a链接的后面加上 #box1
<div class="box-bg"><a href="two.html#box1"><span>历史</span></a></div>
在第跳转的那个页面上标签上加上 id="box1" 这样点击的时候就能直接跳转到相应位置 不用再拖动导航栏了
<li class="li-box1" id="box1">
<div class="img-txt1">历史</div>
<div class="img-nav-point"></div>
</li>
本文来自博客园,作者:小基狠努力啊,转载请注明原文链接:https://www.cnblogs.com/ylh188/p/15007071.html