一、布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src=‘../../package/move.js‘></script>
<style>
*{
margin:0;
padding: 0;
list-style: none;
}
#box{
position: relative;
width: 510px;
margin:60px auto;
}
#box ul{
width: 510px;
overflow: hidden;
}
#box ul li{
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
#box ul li img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="../img/cat/1.jpg" alt=""></li>
<li><img src="../img/cat/2.jpg" alt=""></li>
<li><img src="../img/cat/3.jpg" alt=""></li>
<li><img src="../img/cat/4.jpg" alt=""></li>
<li><img src="../img/cat/5.jpg" alt=""></li>
<li><img src="../img/cat/6.jpg" alt=""></li>
<li><img src="../img/cat/7.jpg" alt=""></li>
<li><img src="../img/cat/8.jpg" alt=""></li>
<li><img src="../img/cat/9.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
二、获取操作元素（当前我们需要操作的是li）
var oBox=document.getElementById(‘box‘); var oUl=oBox.children[0]; var aLi=oUl.children;
三、布局转化
布局转化原因：当前布局为浮动布局（浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，浮动脱离了正常的文档流） ，所以如果不进行布局转化，当元素放大之后，他会挤压其他的浮动元素，导致布局会乱，所以我们需要将布局转化为定位布局（绝对定位），因为绝对定位是不占空间的，而且我们可以通过zIndex去设置层级关系，让放大的元素处于其他元素之上
（1）首先我们需要记录下当前元素的left值，跟top值，因为布局转化之后，元素的位置还是当前的位置
var aPos=[]; //定义一个数组，用于存放当前每个li的left值跟top值
for(var i=0;i<aLi.length;i++){
aPos[i]={
left:aLi[i].offsetLeft, //offsetLeft为元素距离最近的有定位的父级的左边的距离，在此案例中，该父级为oBox，也就是li的left值
top:aLi[i].offsetTop
};
};
（2）进行布局转化。for循环每个li，设置li的left，top值，以及定位
for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aPos[i].left+‘px‘;
aLi[i].style.top=aPos[i].top+‘px‘;
aLi[i].style.position=‘absolute‘;
aLi[i].style.margin=0; //因为offsetLeft是包含了margin的值的，所以布局转化的时候我们需要把margin的值去掉
};
四、for循环每个li，给li添加鼠标移入移出事件
（1）鼠标移入
aLi[i].onmouseover=function(){
move(this,{
width:300,
height:300,
marginLeft:-75,
marginTop:-75
})
this.style.zIndex=2;
};
鼠标移入，引用上节中的运动框架，执行运动函数，将宽度高度设置为300px；并且设置marginLeft:-75,marginTop:-75，因为我们需要的是将li从中心放大，将当前移入的元素的层级设置为2.这样他就处于其他元素之上
（2）输入移出，需要恢复元素状态
aLi[i].onmouseout=function(){
move(this,{
width:150,
height:150,
margin:0
})
this.style.zIndex=0;
};
完整代码：
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oUl=oBox.children[0];
var aLi=oUl.children;
//布局转化
var aPos=[];
for(var i=0;i<aLi.length;i++){
aPos[i]={
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
};
};
for(var i=0;i<aLi.length;i++){
aLi[i].style.left=aPos[i].left+‘px‘;
aLi[i].style.top=aPos[i].top+‘px‘;
aLi[i].style.position=‘absolute‘;
aLi[i].style.margin=0;
};
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
move(this,{
width:300,
height:300,
marginLeft:-75,
marginTop:-75
})
this.style.zIndex=2;
};
aLi[i].onmouseout=function(){
move(this,{
width:150,
height:150,
margin:0
})
this.style.zIndex=0;
};
};
};
</script>
最终效果：
时间： 2024-10-07 14:10:12