JavaScript实战（1）：列表弹出层交互

首先放上完整代码，后面详细讲解一下实现的原理。

    
        
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
        
      
        
        
     

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

最后，我给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)