码迷,mamicode.com
首页 > 移动开发 > 详细

移动端导航过多,点击导航左右滚动回弹

时间:2018-11-15 17:11:45      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:uri   图片   doc   geturl   ref   arc   char   菜单   animate   

移动端导航过多,点击导航左右滚动回弹

移动端项目导航栏目很多,需要左右滑动,前面文章,已经实现,跳转页面也实现了,现在问题是,当点击后面的导航栏目时候,聚焦当前的时候,

需要给当前导航添加一个动画回弹的效果,也就是,让后面的导航,慢慢的移动到可视区域位置

技术分享图片

 

----------------------------------HTML-------------------------------------------

<!--container一级导航-->
<div class="container">
<nav class="nav">
<p class="con">
<a href="a.html?currentIndex=0">00000</a>
<a href="b.html?currentIndex=1">11111</a>
<a href="c.html?currentIndex=2">22222</a>
<a href="d.html?currentIndex=3">33333</a>
<a href="e.html?currentIndex=4">44444</a>
<a href="f.html?currentIndex=5">55555</a>
<a href="j.html?currentIndex=6">66666</a>
<a href="h.html?currentIndex=7">77777</a>
<a href="i.html?currentIndex=8">88888</a>
<a href="k.html?currentIndex=9">99999</a>
</p>
</nav>
</div>
<!--container一级导航-->

----------------------------------css-------------------------------------------

/*各个部分样式*/
@charset "utf-8";

html {
overflow-x: hidden;
}

.container {
height: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}

.nav {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
/*解决ios上滑动不流畅*/
-webkit-overflow-scrolling: touch;
}

.con {
width: 219%;
height: 100%;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
border-bottom: 2px #ccc solid;
}

.con>a {
text-align: center;
width: auto;
color: #000;
display: inline-block;
margin: 0 0.12rem;
font-size: 0.32rem;
line-height: 0.99rem;
height: 0.99rem;
}

.con>a.active {
border-bottom: 2px rgb(255, 123, 0) solid;
color: rgb(255, 123, 0);
}


.container ::-webkit-scrollbar {
display: none;
}

----------------------------------js-------------------------------------------

function getUrlParam(paramName) {

//var params = location.href.substr(1).split(‘&‘);
var params = location.search.substr(1).split(‘&‘);
var result = null;
for (var i = 0; i < params.length; i++) {
var aParam = params[i].split(‘=‘);
if (aParam[0] == paramName) {
result = aParam[1];
break;
}

}

return result

}

$(document).ready(function() {
curItem(getUrlParam("currentIndex"))

});

function curItem(index) {
if(index === -1) {
return
}

var curDOM = $(".con a").eq(index), // 当前的a DOM元素
viewDOM = $(".nav"), // 视图 DOM元素
viewWidth = viewDOM.width(), // 视图宽度
leftRange = curDOM.offset().left, // 当前的a DOM元素距离视图DOM最左边的距离
addedValue = 30; // 附加值,自己定义。主要为了在滚动后,显示出后面的菜单

if(leftRange + curDOM.width() + addedValue > viewWidth) {
// 如果当前的 A DOM元素距离左边的距离,大于视图宽度,说明是看不到的状态
var left = viewDOM.scrollLeft() + (leftRange + curDOM.width() - viewWidth + addedValue)
viewDOM.animate({
scrollLeft: left
},600)
} else if(leftRange - curDOM.width() < viewDOM.scrollLeft()) {
// 如果当前的 A DOM元素距离左边的距离,小于视图scrollLeft的值,说明是看不到的状态
var left = viewDOM.scrollLeft() + leftRange - addedValue
viewDOM.animate({
scrollLeft: left
},600)
}//因为原来他会默认滚动到该去的位置。这次是让它以动画的形式过去就行了

curDOM.addClass("active").siblings().removeClass("active");
}

 ---------------------

下载链接地址:https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%AF%BC%E8%88%AA%E8%BF%87%E5%A4%9A%E7%82%B9%E5%87%BB%E6%BB%9A%E5%8A%A8%E5%9B%9E%E5%BC%B9.rar

感谢 华仔 大侠 lost 得以继续 完美 perfect

移动端导航过多,点击导航左右滚动回弹

标签:uri   图片   doc   geturl   ref   arc   char   菜单   animate   

原文地址:https://www.cnblogs.com/leshao/p/9964269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!