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

news2025/1/19 11:18:25

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

感兴趣的可以关注下我的系列课程【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}); 
         }
       }
     }