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

作者: 下一站前端 | 来源:发表于2017-03-11 08:22 被阅读26次

JavaScript实战（1）：列表弹出层交互
Layui-Table增删改查
2019-07-24任务问题集锦
LayUI组件使用-弹窗
微信小程序用户滑动体验处理
前端开发之tap点透浅谈
js中的三种弹出框
layer弹出层获取父级变量值的问题
JavaScript、DOM
第一篇小概念普及

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

<!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)