图片的展开收缩 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            #img{width:330px;margin: 100px auto;position: relative;}
            li{float:left;width: 100px;height: 100px;background: red;margin: 10px 0 0 10px;}
        </style>
        <script type="text/javascript" src="../js/rainbow.js"></script>
        <script type="text/javascript">
            window.onload=function(){
                var aLi=document.getElementsByTagName('li');
                var zIndex=1;
                var arr=[];
                for(var i=0;i<aLi.length;i++){
                    //获取最原始的left top值
                    arr.push({left:aLi[i].offsetLeft,top:aLi[i].offsetTop});
                }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.left=arr[i].left+'px';
                    aLi[i].style.top=arr[i].top+'px';
                    aLi[i].style.position='absolute';
                    //margin值会和left top 叠加
                    aLi[i].style.margin=0;
                    aLi[i].index=i;
                    aLi[i].onmouseover=function(){
                        this.style.zIndex=zIndex++;
                        this.style.background='green';
                        doMove(this,{width:200,height:200,left:arr[this.index].left-50,top:arr[this.index].top-50});
                    };
                    aLi[i].onmouseout=function(){
                        this.style.background='red';
                        doMove(this,{width:100,height:100,left:arr[this.index].left,top:arr[this.index].top});
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul id="img" >
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

效果

 

posted @ 2016-11-14 19:39  rain92  阅读(233)  评论(0)  编辑  收藏  举报