JQuery制作3D导航栏切换动画

来源：互联网发布：选择公理知乎编辑：程序博客网时间：2024/05/16 07:14

<!DOCTYPE html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="jquery.js"></script>

<style>
    *{padding: 0;margin: 0}
    .content{width: 800px;margin: 100px auto;background-color: grey;height: 600px;position: relative}
    li{list-style: none;float: left;}
    .no1{width: 250px;height: 400px;position: absolute;top: 100px;left: 275px;z-index: 6;opacity: 1}

    .no2{width: 200px;height: 300px;position: absolute;top: 150px;left: 500px;z-index: 5;opacity: 0.8}
    .no3{width: 150px;height: 250px;position: absolute;top:175px;left: 600px;z-index: 0;opacity: 0.5}
    .no4{width: 150px;height: 250px;position: absolute;top: 175px;left: 325px;z-index: 0;opacity: 0.5}
    .no5{width: 150px;height: 250px;position: absolute;top:175px;left: 50px;z-index: 2;opacity: 0.5}

    .no6{width: 200px;height: 300px;position: absolute;top: 150px;left: 100px;z-index: 4;;opacity: 0.8}
     strong{position: relative;top:13px}
    .left-btn{width: 50px;height: 50px;background-color: rgba(9, 128, 15, 0.46);position: absolute ;top: 275px;text-align: center;font-size: 20px;color: #ffffff;cursor: pointer}
    .right-btn{width: 50px;height: 50px;background-color: rgba(9, 128, 15, 0.46);position: absolute ;top: 275px;left:750px;text-align: center;font-size: 20px;color: #ffffff;cursor: pointer}
</style>
<body>

<script>
    jq = jQuery.noConflict();
    jq(document).ready(function(){

        var time = new Date();

        jq(".left-btn").click(function(){

            var pressTime = new Date();

            if(pressTime-time > 500){
                time = pressTime;
                move(0);
            }
        });

        jq(".right-btn").click(function(){

            var pressTime = new Date();
            if(pressTime-time>500){

                time = pressTime;
                move(1);
            }
        });
    });

    //diriction - 方向 ----0-向左移动---1--向右移动---
    function move(diriction){

        //总共图片的数量
        var conut = jq(".content ul li img").length;
        var arrW=[];var arrH=[];var arrT=[];var arrL =[];var arrZ=[];var arrO= [];
        jq(".content ul li img").each(function(i){
            arrZ[i] = jq(this).css("z-index");
            arrW[i] = jq(this).css("width");
            arrH[i] = jq(this).css("height");
            arrT[i] = jq(this).css("top");
            arrL[i] = jq(this).css("left");
            arrO[i] = jq(this).css("opacity");
        });

        //向右
        if(diriction==1){

            for(var i =0;i<conut;i++){
                var position =i+1;
                if(position==conut){
                    position=0;
                }

                jq(".content ul li img").eq(i).animate({
                    "z-index":arrZ[position],
                    "width":arrW[position],
                    "height":arrH[position],
                    "top":arrT[position],
                    "left":arrL[position],
                    "opacity":arrO[position]
                },500)
            }

            //向左
        }else if(diriction == 0){

            for(var j =0;j<conut;j++){

                var position2;

                if(j==0){
                    position2 = 5;
                }else{
                    position2 = j-1;
                }

                jq(".content ul li img").eq(j).animate({
                    "z-index":arrZ[position2],
                    "width":arrW[position2],
                    "height":arrH[position2],
                    "top":arrT[position2],
                    "left":arrL[position2],
                    "opacity":arrO[position2]
                },500)
            }
        }
    }

</script>

<div class="content">

    <ul>
        <li >
            <img class="no1" src="imges/1.jpg" alt="图"/>
        </li>
        <li>
            <img class="no2" src="imges/2.jpg" alt=""/>
        </li>
        <li>
            <img class="no3" src="imges/3.jpg" alt=""/>
        </li>
        <li>
            <img class="no4" src="imges/4.jpg" alt=""/>
        </li>
        <li>
            <img class="no5" src="imges/5.jpg" alt=""/>
        </li>
        <li>
            <img class="no6" src="imges/6.jpg" alt=""/>
        </li>

    </ul>

    <div class="right-btn">
     <strong> > </strong>
    </div>

    <div class="left-btn">
        <strong> < </strong>
    </div>
</div>

</body>
</html>

0 0