JavaScript实战（1）：列表弹出层交互
2017-03-11 本文已影响26人
下一站前端
首先放上完整代码，后面详细讲解一下实现的原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
#wrapper .item{
border: 1px solid #ccc;
height: 30px;
margin: 5px 0
}
#content{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 100%;
background: #fee000;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
<div id="content"></div>
</body>
</html>
<script>
function init(){
var wrapper=document.getElementById('wrapper');
var content=document.getElementById('content');
var items=wrapper.getElementsByClassName('item');
var w=window.innerWidth;
for(var i =0;i<items.length;i++){
(function(i){
items[i].addEventListener('click',function(){
wrapper.style.display='none';
content.innerHTML=i;
content.style.transform='translate3d(-'+w+'px,0,0)';
content.style.transition='all 0.5s';
},false);
})(i);
}
content.addEventListener('click',function(){
this.innerHTML='';
this.style.transform='translate3d(0,0,0)';
this.style.transition='all 0.5s';
wrapper.style.display='block';
},false)
}
window.onload=init;
</script>
css
css方面没什么技巧，主要是弹出层设置为fixed定位，方便动画和自动计算宽高，left设置为100%，即相对于初始位置偏移了一个屏幕的宽度。
js
首先，获取我们需要的dom，包括列表元素，弹窗，并保存窗口的宽度。
var wrapper=document.getElementById('wrapper');
var content=document.getElementById('content');
var items=wrapper.getElementsByClassName('item');
var w=window.innerWidth;
然后，为每一个列表项绑定点击事件，注意这里用到了addEventListener。在循环内部，采用匿名函数传值立即执行的方式，使得i可以被正确保存下来。每个点击事件的回调函数里，要做的是点击后隐藏当前列表，给content分发不同的内容。设置style为translate3d（注意负号，因为content要显示，必须沿着x轴负向偏移），主要是开启移动端硬件加速，使得动画效果更加流畅。
for(var i =0;i<items.length;i++){
(function(i){
items[i].addEventListener('click',function(){
wrapper.style.display='none';
content.innerHTML=i;
content.style.transform='translate3d(-'+w+'px,0,0)';
content.style.transition='all 0.5s';
},false);
})(i);
}
最后，我给content加了一个点击事件，点击之后，先把content清空，再让它做动画原路返回，同时，设置之前的列表wrapper为block，继续下一轮事件循环。（这里只是演示效果，实际应用中应当把关闭事件绑定到对应的按钮上。）
content.addEventListener('click',function(){
this.innerHTML='';
this.style.transform='translate3d(0,0,0)';
this.style.transition='all 0.5s';
wrapper.style.display='block';
},false)
