前端入坑纪 31
又一个项目里的需求，套插件的话不好自定义页面的显示效果。所以就自己写了一个，还是自己写的东西比较好自定义。尤其是对那些喜欢定制的客户来说，要求多的情况下，变更需求后，也好操作修改。平时的刻苦努力，只是为了改需求时能游刃有馀，早点回家抱孩子。毕竟工作不是生活的全部，家人才是最重要的。
真实项目效果图
OK，first things first！项目链接
HTML 结构
<div class="mWrp" id="dv">
<h2>选择学位</h2>
<div class="tapas clear">
<div>
<a href="javascript:;">幼儿园</a>
</div>
<div>
<a href="javascript:;">小学</a>
</div>
<div>
<a href="javascript:;">初中</a>
</div>
<div>
<a href="javascript:;">高中</a>
</div>
</div>
<h2>选择学校和年级班级</h2>
<div class="mtwrp clear">
<div id="ltwrp" class="fl">
<div class="divs">
<section style="transform:translateY(0)">
<a class="on" href="javascript:;">龙湾海城心动幼儿园1</a>
<a href="javascript:;">龙湾幼儿园2</a>
<a href="javascript:;">龙湾幼儿园3</a>
<a href="javascript:;">龙湾幼儿园4</a>
<a href="javascript:;">龙湾幼儿园5</a>
<a href="javascript:;">龙湾幼儿园6</a>
<a href="javascript:;">龙湾幼儿园7</a>
</section>
</div>
</div>
<div id="rtwrp" class="fr">
<div class="divs">
<section style="transform:translateY(0)">
<a class="on" href="javascript:;">大班1</a>
<a href="javascript:;">大班2</a>
<a href="javascript:;">大班3</a>
<a href="javascript:;">中班1</a>
<a href="javascript:;">中班2</a>
<a href="javascript:;">中班3</a>
<a href="javascript:;">小班1</a>
<a href="javascript:;">小班2</a>
<a href="javascript:;">小班3</a>
</section>
</div>
</div>
</div>
<a class="netBtn" href="javascript:;">下一步</a>
<div class="clear" style="margin-top:6%">
<input class="fl" id="socName" type="text" />
<input class="fr" id="clsName" type="text" />
</div>
</div>
html 这里 给div#rtwrp和div#ltwrp 设定固定的高，这样里面的所有a超过高度就会隐藏了。然后给section 添加transform:translateY。所有的关键也都是和这个translateY有关，通过控制它的不同值，让不同的a在滑动时都处在第一位置。
CSS 结构
/*rest style*/
body {
padding: 0;
margin: 0;
background-color: #fff;
max-width: 640px;
margin: 0 auto;
}
p {
padding: 0;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a {
outline: none;
text-decoration: none;
color: #525252;
}
img {
vertical-align: middle;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear::after {
display: block;
content: "";
clear: both;
}
/*page style*/
.mWrp {
padding: 10px;
}
.tapas a {
display: inline-block;
background-image: linear-gradient(-140deg, #f3557a 0%, #fa7157 98%);
border: 3px solid #ffe9e6;
border-radius: 50%;
width: 56px;
height: 56px;
line-height: 56px;
font-size: 12px;
color: #ffffff;
text-align: center;
}
.tapas div {
float: left;
width: 25%;
text-align: center;
}
.mWrp h2 {
text-align: center;
font-size: 16px;
color: #4a4a4a;
}
.netBtn {
display: block;
background-image: linear-gradient(-132deg, #f3557b 0%, #fa7157 100%);
border-radius: 9px;
width: 90%;
margin-left: 5%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: #ffffff;
margin-top: 6%;
}
.mtwrp>div {
width: 50%;
height: 240px;
overflow: hidden;
}
.divs>section {
transition: all 300ms linear
}
.mtwrp a {
display: block;
background: #ffffff;
border: 2px solid #ffe1db;
border-radius: 100px;
width: 96%;
box-sizing: border-box;
height: 45px;
font-size: 14px;
color: #f55a75;
text-align: center;
margin: 15px 2%;
line-height: 41px;
transition: all 120ms ease
}
.mtwrp a.on {
background-image: linear-gradient(-134deg, #f4567b 0%, #fa7157 100%);
border-color: #ffe1db;
color: #fff;
}
css这里记得要给滑动的dom元素，也就是每个section 和它们里面的a添加过渡属性就对了
JS 结构
// 这里是禁止微信里下滑是出现整个网页下拉的效果，其实本质就是禁止了触控滑动，然后用scorlltop去模拟滑动效果
var y, st, dv = document.getElementById('dv');
document.addEventListener('touchend', function(e) {
document.body.scrollTop = document.documentElement.scrollTop = st + y - e.changedTouches[0].pageY;
}, false);
document.addEventListener('touchstart', function(e) {
st = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
y = e.touches[0].pageY;
e.preventDefault();
}, false);
var leftNav = document.getElementById("ltwrp");
var rightCont = document.getElementById("rtwrp");
var school = document.getElementById("socName");
var oclsName = document.getElementById("clsName");
var startY = endY = changeHet = cNum = 0;
var rightHet = rightCont.getElementsByTagName("section")[0].offsetHeight;
var leftHet = leftNav.getElementsByTagName("section")[0].offsetHeight;
var maxhetRight = rightHet - 60 + 15;// 右边滑动内容最大的可滑动高度
var maxhetLeft = leftHet - 60 + 15;// 左边滑动内容最大的可滑动高度
// 初始化input里面的值为第一个a的内容
school.setAttribute("value", leftNav.getElementsByTagName("a")[0].innerText);
oclsName.setAttribute("value", rightCont.getElementsByTagName("a")[0].innerText);
// 滑动时要执行操作的都在这个函数里，传入滑动的对象，对象的高，还有对应的变更值的input
function scrollFuc(obejt, oheight, oinpt) {
var distance = 0;// 用来存每次滑动后translateY的值
obejt.addEventListener("touchstart", function(evt) {
startY = evt.targetTouches[0].clientY;// 触摸起先（touchstart）的clientY的值
});
obejt.addEventListener("touchmove", function(evt) {
endY = evt.targetTouches[0].clientY;// 触摸过程中（touchmove）的clientY的值
});
obejt.addEventListener("touchend", function(evt) {
cNum = endY - startY;// 触摸结束时（touchend）的clientY的差值
changeHet = Math.round(cNum / 90) * 60;// 将差值除以30的倍数后四舍五入取整，再乘以60（每个a相差60）得到最终的变更高度。
distance += changeHet;// 每次变更的高度再加原先的高度值
// 这里自然是高度的范围，不然滑动过头
if (distance > 0) {
distance = 0;
} else if (distance < -oheight) {
distance = -oheight
}
// 将最终的tranlateY值付给当前传入的对象
this.getElementsByTagName("section")[0].style.transform = "translateY(" + distance + "px)";
// 取消当前对象下所有选项a的效果
var mas = this.getElementsByTagName("a");
for (var i = 0; i < mas.length; i++) {
mas[i].className = "";
}
// 选中滚动距离对应的a，添加on 的选中效果
setTimeout(function() {
mas[Math.abs(distance / 60)].className = "on";
oinpt.setAttribute("value", mas[Math.abs(distance / 60)].innerText)
}, 560);
});
}
// 这里自然就是调用上面构建的函数了
scrollFuc(rightCont, maxhetRight, oclsName);
scrollFuc(leftNav, maxhetLeft, school);
js基本备注已经添加完毕，感兴趣的小伙伴可以研究下。
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
网友评论