【原生js案例】webApp实现鼠标移入移出相册放大缩小动画

图片相册这种动画效果也很常见，在我们的网站上。鼠标滑入放大图片，滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。

感兴趣的可以关注下我的系列课程【webApp之h5端实战】，里面有大量的css3动画效果制作原生知识分析，讲解，该系列还在不断更新中。

实现效果

代码展示

• 页面基础结构

 <h2>鼠标移入移出图片缩小放大效果</h2><ul id="ul1"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>

• 页面UI美化

*{padding: 0;margin: 0;}#ul1{list-style: none;width: 330px;margin: 60px auto;}#ul1 li{float: left;width: 100px;height: 100px;background-color: red;margin: 10px 0 0 10px;cursor: pointer;}h2{text-align: center;margin-top: 50px;}

• 核心逻辑脚本
  在js中，进行样式的优化与背景图片的设置，根据图片的命名习惯，我们可以很方便的进行背景图设置。

// 元素居中方法window.onload = function(){const oUl = document.getElementById('ul1');const aLi = oUl.getElementsByTagName('li');oUl.style.position = 'relative';const arr = []let zIndex= 1// 在用js去设置css属性的时候，在同一代码块中，有些样式的优先级很高的// aLi[i].style.position = 'absolute';虽然写在后面，但是会提前解析生效for(let i=0;i<aLi.length;i++){aLi[i].style.left = aLi[i].offsetLeft + 'px';aLi[i].style.top = aLi[i].offsetTop + 'px';aLi[i].style.background = `url(./images/${i+1}.png) no-repeat center`;aLi[i].style.backgroundSize = '100% 100%';arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});}for(let i=0;i<aLi.length;i++){aLi[i].style.position = 'absolute';aLi[i].style.margin = '0';aLi[i].index = i;// 添加移入移除事件aLi[i].onmouseover = function(){this.style.zIndex = zIndex++move(this,{width:200,height:200,left:arr[this.index].left-50,top:arr[this.index].top-50}); }aLi[i].onmouseout = function(){move(this,{width:100,height:100,left:arr[this.index].left,top:arr[this.index].top}); }}}

总结

• 在每个li上面添加事件的时候，一定要注意索引index的正确获取
• 每个li的初始left和top必须预先存起来，不能使用当前的最新left和top