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
            }, );
        }