jquery +css3 3d 幻影图片切换 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <style>
    .main{width:1020px; margin:0 auto;}
    .slide-wrap 
    {
        width:480px; height:346px; position:relative; margin:50px auto; padding:0px; list-style:none;
       transform-style:preserve-3d;/*让子元素继承3d效果*/
       -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
       -o-transform-style:preserve-3d;
       -ms-transform-style:preserve-3d;
       perspective:1000px;
       -webkit-perspective:1000px;/*视图距离*/
       -moz-perspective:1000px;
       -ms-perspective:1000px;
       -o-perspective:1000px;
        }
    .slide-wrap li
    {
        width:480px; height:346px; position:absolute; top:0px; left:0px;box-shadow:0 10px 20px rgba(0,0,0,.1); font-size:0;-webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; z-index:2;
        }
    .slide-wrap li a {width:480px; height:346px; position:relative;}
    .slide-wrap li a div
    {
        width:400px; height:50px; position:absolute; bottom:0px; left:40px; background: #CBBFAE;
        background: rgba(190,176,155, 0.4);
        border-left: 4px solid white;
        border-left: 4px solid rgba(255,255,255,0.7);
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);    
        opacity:0.5;
        color: black;
        z-index:9999;
                       }
    .slide-wrap li a div:hover{
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);    
        background: rgba(190,176,155, 0.8);
        }
    .slide-wrap li a img{width:478px; height:344px; border:1px solid gray;}
    .leftClass
    {
        transform:translateX(-350px) translateZ(-200px) rotateY(45deg);
        -webkit-transform:translateX(-350px) translateZ(-200px) rotateY(45deg);
        -moz-transform:translateX(-350px) translateZ(-200px) rotateY(45deg);
        -o-transform:translateX(-350px) translateZ(-200px) rotateY(45deg);
        -ms-transform:translateX(-350px) translateZ(-200px) rotateY(45deg);
        opacity:1; visibility:visible;
        }
        .rightClass
        {
            transform:translate3d(350px,0px,-200px) rotateY(-45deg);
            -webkit-transform:translate3d(350px,0px,-200px) rotateY(-45deg);
            -moz-transform:translate3d(350px,0px,-200px) rotateY(-45deg);
            -ms-transform:translate3d(350px,0px,-200px) rotateY(-45deg);
            -o-transform:translate3d(350px,0px,-200px) rotateY(-45deg);
            opacity:1;
            }
            .centerClass{
                -webkit-transform:translateX(0px) translateZ(0px) rotateY(0deg);
                -moz-transform:translateX(0px) translateZ(0px) rotateY(0deg);
                -ms-transform:translateX(0px) translateZ(0px) rotateY(0deg);
                -o-transform:translateX(0px) translateZ(0px) rotateY(0deg);
                transform: translateX(0px) translateZ(0px) rotateY(0deg);
                opacity:1; visibility:visible;
                z-index:99;
    }
    .outleft{ 
        -webkit-transform:translateX(-450px) translateZ(-300px) rotateY(45deg);
        -moz-transform:translateX(-450px) translateZ(-300px) rotateY(45deg);
        -ms-transform:translateX(-450px) translateZ(-300px) rotateY(45deg);
        -o-transform:translateX(-450px) translateZ(-300px) rotateY(45deg);
        transform: translateX(-450px) translateZ(-300px) rotateY(45deg);
        opacity:0; visibility:hidden;    
    }
    
    .outright{ 
        -webkit-transform:translateX(450px) translateZ(-300px) rotateY(-45deg);
        -moz-transform:translateX(450px) translateZ(-300px) rotateY(-45deg);
        -ms-transform:translateX(450px) translateZ(-300px) rotateY(-45deg);
        -o-transform:translateX(450px) translateZ(-300px) rotateY(-45deg);
        transform: translateX(450px) translateZ(-300px) rotateY(-45deg);
        opacity:0; visibility:hidden;    
    }
    .btn{width:50px; height:30px; border:0px; background:yellow; cursor:pointer; font-weight:700; color:green; font-size:16px;}
    </style>
</head>
<body>
    <div class="main">
        <ul class="slide-wrap">
            <li class="outleft">
                <a href="">
                    <img src="images/5.jpg" />
                    <div class="titleDescription">绿巨人1</div>
                </a>
            </li>
            <li class="leftClass"><a href=""><img src="images/1.jpg" /><div class="titleDescription">绿巨人2</div></a></li>
            <li class="centerClass">
                <a href="">
                    <img src="images/2.jpg" />
                    <div class="titleDescription">绿巨人3</div>
                </a>
            </li>
            <li class="rightClass"><a href=""><img src="images/3.png" /><div class="titleDescription">绿巨人4</div></a></li>
            <li class="outright"><a href=""><img src="images/6.png" /><div class="titleDescription">绿巨人5</div></a></li>
        </ul>
        <div style=" text-align:center;">
            <input type="button" value="prev" id="prev" class="btn"/>
            <input type="button" value="next" id="next" class="btn"/>
        </div>
    </div>
    <script>
        $(function () {
            $.fn.slide = function () {
                var slideWrap = $(this);
                var classArray = ["outleft", "leftClass", "centerClass", "rightClass", "outright"];
                var prevBtn = $("#prev");
                var nextBtn = $("#next");
                var move = function (dir) {
                    if (dir == "next") {
                        slideWrap.children("li:first").appendTo(slideWrap);
                    }
                    if (dir == "prev") {
                        slideWrap.children("li:last").prependTo(slideWrap);
                    }
                    slideWrap.children("li").each(function (i) {
                        $(this).attr("class", classArray[i]);
                    });
                };
                var autoPlay = function (dir) {
                    move(dir);
                };
                var init = function () {
                    var t = setInterval(function () {
                        autoPlay("next");
                    }, 3000);
                };
                nextBtn.click(function () {
                    move("next");
                });
                prevBtn.click(function () {
                    move("prev");
                });
                init();
                // move("next");
            };
            $(".slide-wrap").slide();
        });
    </script>
</body>
</html>

 

效果图：

 

 

有点问题就是透明层里面的文字没有显示出来，待完善。

ps:此文仿照的是别人的demo，纯学习

posted @ 2014-03-08 19:53  菠萝君  阅读(296)  评论(0)    收藏  举报