多图片缩放

最新推荐文章于 2024-07-11 09:47:51 发布

原创最新推荐文章于 2024-07-11 09:47:51 发布 · 147 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript和CSS实现的九宫格图片布局和动态放大效果的方法。通过给每个图片元素添加鼠标悬停事件，图片会在鼠标悬停时从中心位置放大，并在鼠标离开时恢复原状。此效果利用了starMove.js运动框架，实现了平滑的过渡动画。

* {
                margin:0px;
                padding:0px;
            }
            #ul1 li {
                list-style: none;
                width:100px;
                height:100px;
                border:1px solid black;
                margin:10px;
                float:left;
                background-color: gray;
            }
            #ul1 {
                width:366px;
                height:366px;
                border:1px solid black;
                margin:100px auto;

            }
            #ul1 li img {
                width:100%;
                height:100%;
            }

在这里插入图片描述
引入starMove.js ——运动多样式框架

/* 
              九宫格布局
              布局的时候：相对定位
              实际放大的时候：必须绝对定位
              文档流的转换：相对定位  转换  绝对定位
            */
           window.onload = function(){
               var oUl1 = document.getElementById("ul1");
               var aLis = oUl1.getElementsByTagName("li");
               var currentIndex = 2;
               //获取每一个li标签的位置
               for(var i=0;i<aLis.length;i++){
                   aLis[i].style.left = aLis[i].offsetLeft + "px";
                   aLis[i].style.top = aLis[i].offsetTop + "px";
                   var oImg = document.createElement("img");
                   oImg.src = "image/" + (i+1) + ".jpg";
                   aLis[i].appendChild(oImg);

               }
               for(var i=0;i<aLis.length;i++){
                   aLis[i].style.position = "absolute";
                   aLis[i].style.margin = "0px";

                   //给每一个li标签添加移入移出
                   aLis[i].onmouseover = function(){
                       this.style.zIndex = currentIndex++;

                       //设置从中心放大
                       starMove(this,{
                           width:200,
                           height:200,
                           marginLeft:-50,
                           marginTop:-50
                       });
                   }
                   aLis[i].onmouseout = function(){
                    starMove(this,{
                           width:100,
                           height:100,
                           marginLeft:0,
                           marginTop:0
                       });

                   }
               }
           }