position记录元素原始位置

position记录元素原始位置

css样式：

li {
        width: 100px;
        height: 100px;
        margin: 10px 0 0 10px;
        background-color: #ccc;
        float: left;
    }

标签样式：

    <ul id="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

js代码如下：

    let btn = document.getElementsByTagName('li');
    let arr = [];//新建一个空数组记录元素的原始位置
    let zIndex = 1;

    for (let a = 0; a < btn.length; a++) {
        arr.push({
                left: btn[a].offsetLeft,
                top: btn[a].offsetTop
            }) //记录未定位的初始位置，储存到数组
    }
    console.log(arr);

    for (let a = 0; a < btn.length; a++) {
        //绝对定位后图片本身是重叠在一起
        btn[a].style.position = 'absolute';
        //定位后再次赋值
        btn[a].style.left = arr[a].left + 'px';
        btn[a].style.top = arr[a].top + 'px';

        btn[a].onmouseover = function() {
            btn[a].style.zIndex = zIndex++;
            animate1(this, {
                width: 200,
                height: 200,
                left: arr[a].left - 50,
                top: arr[a].top - 50
            }, );
        }