专栏名:苹果相册展示效果
所有者:沿着篱笆摘桃花

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> *{ padding:0; margin: 0; } html,body{ height: 100%; width: 100%; overflow: hidden; } body{ background:#000; } .wrap{ position:relative; width: 100%; height: 100%; } img{ position: absolute; left: 0; top:0; width: 550px; height: 309x; transition: all 500ms linear; box-reflect:below 0; -webkit-box-reflect:below 0 -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,0));

            }
            .mid{
                    position: absolute;
                    left: 50%;
                    top:50%;
                    width: 550px;
                    height: 309x;
                    margin-top: -155px;
                    margin-left: -275px;
                    transform-style: preserve-3d;
                    perspective:800px;
                    -moz-transform-style: preserve-3d;
                    -moz-perspective:800px;

            }
            img.left{
                    transform:translateZ(-100px) rotateY(45deg);
                    -webkit-transform:translateZ(-100px) rotateY(45deg);
                    -moz-transform:translateZ(-100px) rotateY(45deg);
                    }

            img.middle{
                    left:0;
                    transform:translateZ(100px) rotateY(0deg);
                    z-index: 10;
            }
            img.right{
                    transform: translateZ(-100px) rotateY(-45deg);
                    -webkit-transform:translateZ(-100px) rotateY(-45deg);
                    -moz-transform:translateZ(-100px) rotateY(-45deg);
            }                                       
            img:nth-child(1){                       
                    left: -400px;
                    z-index: 0;
            }
            img:nth-child(2){                       
                    left: -200px;
                    z-index: 1;
            }
            img:nth-child(4){                       
                    left: 200px;
                    z-index: 1;
            }
            img:nth-child(5){                       
                    left: 400px;
                    z-index: 0;

            }
    </style>

</head> <body>

</body> </html>

<script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function() { $(".wrap img").click(function() { var index=$(this).index(); $(".wrap img").removeAttr("class"); for(var i=0;i<=4;i++) { if(i>index) { $(".wrap img").eq(i).addClass("right"); var rSum=$(".right").length; for(var j=0,ff=rSum;j<rSum;j++,ff--) { $(".right").eq(j).css("z-index",ff); } } else if(i<index){ $(".wrap img").eq(i).addClass("left").css("z-index",0); for(var k=0;k<$(".left").length;k++) { $(".left").eq(k).css("z-index",k); } } $(".wrap img").eq(i).css({"left":(i-index)*200+"px"},300); $(this).addClass("middle").css("z-index",10); } }) }) </script>

前端大神群,诚招各类英雄。群号:558925746进群口号:前端大神enter code here

成员
暂无文章
我的收藏