首页 » CSS » 文章标题

文章标题

2016-11-30 18:40:06阅读(653)

炫酷相册制作 css
 *{margin: 0;padding: 0}
 ul{list-style: none}
  #ul{width: 980px;height: 500px;}
  #ul li{position: absolute;transition:transform 2s ease-in,left 2s,top 2s ;background-color: white}
  .item{width: 100%;height: 100%;transition:transform 2s ease-in 2s }
  .center{ position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;}
结构
<body style="background-color: #000000">
<ul id="ul" class="center">
</ul>
</body>
代码
  $(function () {
            var rows=5;//行
            var collums=5;//列
            var  w=$('#ul').width()/collums;//每一行的宽度
            var  h=$('#ul').height()/rows;//每一列的高
            var  change=false;
        //init初始值
        function init() {
            for(var r=0;r<rows;r++){//先循环列后变成五个列让五列在循环没一行
                for(var c=0;c<collums;c++){//循环行
                    $('<li><div class="item"></div></li>').width(w).height(h)
                            .css({'left':c*w+'px','top':r*h+'px'})
                            .appendTo($('#ul'))
                }
            }
            $('#ul').find('li').on('click',function () {
                if (!change){
                    unfold();
                }else {
                    var index=$(this).index();
                    fold(index);
                }
            })
        }
            init();
            unfold();
        //unfold展开
        function unfold() {
            change=true;
            $('#ul').find('li')
                    .each(function (i) {
                        var r=parseInt(i/collums);//表示多少行
                        var c=i%collums;//表示多少列
                        var dx=c*30-60;
                        var dy=r*30-60;
                        console.log(dx);
                        var deg=Math.random()*60-30;
                        $(this).css({'transform': 'rotate('+deg+'deg) translate('+dx+'px,'+dy+'px)'})
                    })
                    .find(' .item').css({'transform': 'scale(0.97)'}).each(function (i) {
                     $(this).css({'background-image':"url(images/"+i+".jpg)","background-size":" cover"})
                   });
        }
        //fold合拢
        function fold(index){
             change=false;
            $('#ul').find('li').css({'transform': 'rotate(0deg) translate(0px,0px)'})
                    .find('.item').css({'background-image':"url(images/"+index+".jpg)","background-size":" auto",'transform': 'scale(1)'})
                    .each(function (i) {
                        var r=parseInt(i/collums);//表示多少行
                        var c=i%collums;//表示多少列
                        var  x=c*100/(collums-1);
                        var  y=r*100/(rows-1);
                        $(this).css({'background-position':+x+"%"+y+"%"})
                    })
        }
        })

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹