运动-手风琴 - 小之

一、html+css布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <script src='../../package/move.js'></script>
    <style>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 250px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #box ul li{
            width: 500px;
            height: 250px;
            position: absolute;
            top:0;
        }

        #box ul li img{
            width: 500px;
            height: 250px;
        }


    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="../img/qin/1.jpg" alt=""></li>
            <li><img src="../img/qin/2.jpg" alt=""></li>
            <li><img src="../img/qin/3.jpg" alt=""></li>
            <li><img src="../img/qin/4.jpg" alt=""></li>
            <li><img src="../img/qin/5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>;

二、获取需要操作的元素

var oBox=document.getElementById('box');
var aLi=oBox.getElementsByTagName('li');

三、布局

分析布局可以知道，第一个li的left值为0，位置是不需要变化的

我们假设右边每个竖条的宽度为30 var w=30；

第二个li的left值为：oBox的盒模型的宽度减去4*w -------->4===aLi.length-1;

第三个li的left值为：oBox的盒模型的宽度减去3*w -------->3===aLi.length-2;

第三个li的left值为：oBox的盒模型的宽度减去2*w -------->2===aLi.length-3;

第三个li的left值为：oBox的盒模型的宽度减去1*w -------->1===aLi.length-4;

        //布局
        var w=30;
        for(var i=1;i<aLi.length;i++){
            aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
        }

四、for循环，给每个li添加一个鼠标移入事件

假设移入之后的样式为上图所示，则分析布局：

左边：

第一个：left为w*0;

第二个：left为w*1

中间部分：left为w*2

右边：

第一个：left为oBox.offsetWidth-2*w+'px';-------->2===(aLi.length-3)*w+'px';

第二个：left为oBox.offsetWidth-1*w+'px';-------->1===(aLi.length-4)*w+'px';

所以我们需要循环判断li是在左边还是在右边，假设每个li上面都有一个索引值，从0开始，则第一个的索引值为0，第二个为1，第三个为2，依次类推，如果i的值是小于等于当前li的index的时候，则使li全部处于左边，否则处于右边，代码如下：

        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                for(var i=0;i<aLi.length;i++){
                    if(i<=this.index){
                        /*aLi[i].style.left=i*w+'px';*/
                        move(aLi[i],{left:i*w})
                    }else{
                        /*aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';*/
                        move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w})
                    }
                };
            };

        };

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <script src='../../package/move.js'></script>
    <style>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #box{
            width: 500px;
            height: 250px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        #box ul li{
            width: 500px;
            height: 250px;
            position: absolute;
            top:0;
        }

        #box ul li img{
            width: 500px;
            height: 250px;
        }


    </style>
    <script>
    window.onload=function(){
        var oBox=document.getElementById('box');
        var aLi=oBox.getElementsByTagName('li');

        //布局
        var w=30;
        for(var i=1;i<aLi.length;i++){
            aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
        }

        for(var i=0;i<aLi.length;i++){
            aLi[i].index=i;
            aLi[i].onmouseover=function(){
                for(var i=0;i<aLi.length;i++){
                    if(i<=this.index){
                        /*aLi[i].style.left=i*w+'px';*/
                        move(aLi[i],{left:i*w})
                    }else{
                        /*aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';*/
                        move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w})
                    };
                };
            };

        };

    };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="../img/qin/1.jpg" alt=""></li>
            <li><img src="../img/qin/2.jpg" alt=""></li>
            <li><img src="../img/qin/3.jpg" alt=""></li>
            <li><img src="../img/qin/4.jpg" alt=""></li>
            <li><img src="../img/qin/5.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>;

posted on 2019-01-02 16:02 小之阅读(173) 评论(0) 编辑收藏举报