多图片放大显示 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
                margin:0;
                padding:0}
        #box{
            width:366px;
            height:366px;
            border:2px solid red;
            margin:50px auto;
            position: relative;
        }
            li{
                width:100px;
                height:100px;
                border:1px solid #999;
                background: green;
                float:left;
                list-style:none;
                margin:10px;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box");
                var aLi=oBox.children;
                var arr=[];//用来存放每个li的位置;
                for(var i=0;i<aLi.length;i++){
                    arr[i]={left:aLi[i].offsetLeft, //获取到float布局中oBox的相对左距离
                            top:aLi[i].offsetTop}
                        }
                //布局转换，float--position
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.position='absolute';
                    aLi[i].style.left=arr[i].left+'px';
                    aLi[i].style.top=arr[i].top+'px';
                    aLi[i].style.margin=0;  //定位布局后不需要margin,因为已经设定了位置;
                    }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].onmouseover=function(){
                        move(this,{width:200,height:200,marginLeft:-50,marginTop:-50},{time:500,easing:'ease-out'});
                        this.style.zIndex=i++;//保证移上去的那个层级最高
                    }
                    aLi[i].onmouseout=function(){
                        move(this,{width:100,height:100,marginLeft:0,marginTop:0},{time:500,easing:'ease-out'});
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

 

posted @ 2016-07-25 21:13  河南小样  阅读(175)  评论(0)  编辑  收藏  举报