用js实现幻灯片放大图片效果

最新推荐文章于 2025-03-15 11:39:38 发布

原创最新推荐文章于 2025-03-15 11:39:38 发布 · 904 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#幻灯片 #图片 #放大镜 #javascript

web前端学习专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的图片网格布局，在鼠标悬停时图片能够平滑放大并重新定位的效果。通过调整CSS样式和利用jQuery动画功能，实现了良好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
    }
      #content{
        width: 420px;
        height: 420px;
        margin: 50px auto;
        position: relative;
      }
      #content li{
        width: 120px;
        height: 120px;
        margin: 10px;
        float: left;
        /*position: absolute;*/
      }
      #content li img{
        width: 100%;
        height: 100%;
      }
    </style>

</head>
<body>
<ul id="content">
       <li><img src="img/a.jpg" alt=""></li>
       <li><img src="img/b.jpg" alt=""></li>
       <li><img src="img/c.jpg" alt=""></li>
       <li><img src="img/d.jpg" alt=""></li>
       <li><img src="img/e.jpg" alt=""></li>
       <li><img src="img/f.jpg" alt=""></li>
       <li><img src="img/g.jpg" alt=""></li>
       <li><img src="img/h.jpg" alt=""></li>
       <li><img src="img/big.jpg" alt=""></li>
</ul>
 <script src="js/jquery.min.js"></script>
 <script>
      var oul=document.getElementById('content');
      var oli=oul.getElementsByTagName('li');
      for(var i=0;i<oli.length;i++){
        oli[i].style.left=oli[i].offsetLeft+'px';//不要忘记加单位，定位要另写循环，因为absolute会导致空间释放，每次循环都会导致后面元素顶上去，造成效果误差
        oli[i].style.top=oli[i].offsetTop+'px';
        oli[i].width=oli[i].offsetWidth;
        oli[i].height=oli[i].offsetHeight;
        oli[i].left=oli[i].offsetLeft;
        oli[i].top=oli[i].offsetTop;
        //oli[i].style
        oli[i].onmouseover=function(){
          $(this).animate({
            width:this.offsetWidth+100,
            height:this.offsetHeight+100,
            left:this.offsetLeft-50,
            top:this.offsetTop-50,
          })
          this.style.zIndex++;
          // this.style.width=this.offsetWidth+100+'px';
          // this.style.height=this.offsetHeight+100+'px';
          // this.style.left=this.offsetLeft-50+'px';
          // this.style.top=this.offsetTop-50+'px';
        }

      oli[i].onmouseout=function(){
          $(this).animate({
            width:this.width,
            height:this.height,
            left:this.left,
            top:this.top,
          })
          this.style.zIndex--;
        }
      }
      for(var i=0;i<oli.length;i++){
        oli[i].style.position='absolute';
      }

 </script>
</body>
</html>

这里写图片描述