position记录元素原始位置
css样式:
li {
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, {
200,
height: 200,
left: arr[a].left - 50,
top: arr[a].top - 50
}, );
}