妙味课堂--导航手风琴效果（转） 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .P800 {
            -webkit-perspective: 800px;
            -moz-perspective: 800px;
            -ms-perspective: 800px;
            perspective: 800px;
        }
        .T3D {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        body{
            background: #fff url(http://www.miaov.com/2013/css/bg/bg1.jpg) no-repeat top right;
        }
        #fold_box {
            position: absolute;
            right: 100px;
            top: 0;
            width: 146px;
            height: 54px;
        }

        #fold h2 {
            margin: 0;
            width: 146px;
            height: 54px;
            padding-top: 18px;
            line-height: 36px;
            text-indent: 50px;
            font-size: 16px;
            color: #fff;
            background: url(http://www.miaov.com/2013/img/topMenu/topMenu.png) no-repeat;
            position: relative;
            z-index: 2;
            font-family: arial;
            -ms-transform: translateZ(1px);
            -moz-transform: translateZ(1px);
            -webkit-transform: translateZ(1px);
            -o-transform: translateZ(1px);
            transform: translateZ(1px);
        }


        #fold_list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .fold_pager {
            width: 146px;
            height: 30px;
            transform-origin: center top;
        }

        #fold_list a {
            display: inline-block;
            background-color: rgb(223, 223, 223);
            width: 146px;
            height: 29px;
            margin-bottom: 1px;
            line-height: 29px;
            color: #d16c6c;
            text-indent: 16px;
            font-size: 13px;
            text-decoration: none;
            z-index: 3;
            font-family: arial;
            -ms-transition: 0.6s;
            -moz-transition: 0.6s;
            -webkit-transition: 0.6s;
            -o-transition: 0.6s;
            transition: 0.6s;
        }

        #fold_list a:hover {
            background-color: #f69 !important;
            color: #fff;
            text-indent: 20px;
            font-size: 14px;
            box-shadow: 1px 1px 3px 2px #dfdfdf;
        }
    </style>
    <script type="text/javascript" class="library" src="js/jquery-1.11.3.min.js"></script>
    <script>
        //添加缓动扩展
        jQuery.extend(jQuery.easing,{
            easeOutBack: function (x, t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            }
        })

        var pageArr;

        function rotateDown(index) {
            if (index < 0 || index >= pageArr.length) {
                return;
            }
            var ele = pageArr.eq(index);
            ele.children("a").css("background-color", "#fff");
            var obj = ele.data("obj");
            if (!obj) {
                ele.data("obj", { r: getNumByEle(ele) });
                obj = ele.data("obj");
            }
            else obj.r = getNumByEle(ele);
            $(obj).animate({ r: 0 }, {
                duration: 1000,
                easing: "easeOutBack",
                step: function () {
                    ele.css({
                        "-moz-transform": "rotateX(" + this.r + "deg)",
                        "-webkit-transform": "rotateX(" + this.r + "deg)",
                        "-0-transform": "rotateX(" + this.r + "deg)",
                        "-ms-transform": "rotateX(" + this.r + "deg)",
                        "transform": "rotateX(" + this.r + "deg)"
                    });

                    //根据偏移量判断是否展开下一个
                    if (ele.data("opening")) return;  //已经开始折叠下一个了
                    var rotateOff = getNumByEle(ele);
                    if (rotateOff > -120) {
                        ele.data("opening", true);
                        rotateDown(index + 1);
                    }
                },
                complete: function () {
                    ele.css({
                        "-moz-transform": "rotateX(0deg)",
                        "-webkit-transform": "rotateX(0deg)",
                        "-0-transform": "rotateX(0deg)",
                        "-ms-transform": "rotateX(0deg)",
                        "transform": "rotateX(0deg)"
                    });
                }
            });
        }

        function rotateUp(index) {
            if (index < 0 || index >= pageArr.length) {
                return;
            }
            var ele = pageArr.eq(index);
            ele.children("a").css("background-color", "rgb(223,223,223)");
            var obj = ele.data("obj");
            if (!obj) {
                ele.data("obj", { r: getNumByEle(ele) });
                obj = ele.data("obj");
            }
            else obj.r = getNumByEle(ele);
            $(obj).animate({ r: -180 }, {
                duration: 600,
                easing: "linear",
                step: function () {
                    ele.css({
                        "-moz-transform": "rotateX(" + this.r + "deg)",
                        "-webkit-transform": "rotateX(" + this.r + "deg)",
                        "-0-transform": "rotateX(" + this.r + "deg)",
                        "-ms-transform": "rotateX(" + this.r + "deg)",
                        "transform": "rotateX(" + this.r + "deg)"
                    });

                    //根据偏移量判断是否折叠上一个
                    if (ele.data("closing")) return;  //已经开始折叠上一个了
                    var rotateOff = getNumByEle(ele);
                    if (rotateOff < -60) {
                        ele.data("closing", true);
                        rotateUp(index - 1);
                    }
                },
                complete: function () {
                    ele.css({
                        "-moz-transform": "rotateX(-180deg)",
                        "-webkit-transform": "rotateX(-180deg)",
                        "-0-transform": "rotateX(-180deg)",
                        "-ms-transform": "rotateX(-180deg)",
                        "transform": "rotateX(-180deg)"
                    });
                }
            });
        }

        function getNumByEle(ele) {
            var rotateStyle = ele.attr("style");
            return rotateStyle.match(/rotateX\(([-]?\d+)/)[1];
        }

        function stopAll() {
            for (var i = 0; i < pageArr.length; i++) {
                var ele = pageArr.eq(i);
                ele.data("opening", false);
                ele.data("closing", false);
                var obj = ele.data("obj");
                if (obj && $(obj).stop) {
                    $(obj).stop(true, false);
                }
            }
        }

        $(function(){
            pageArr = $("#fold .fold_pager");
            $("#fold").mousemove(function (e) {  //Y轴旋转
                var el = e.clientX - $(this).offset().left;
                var off = 60 * el / $(this).width() - 30;
                //this.style.transform = "rotateY(" + off + "deg)";
                $(this).css({
                    "-webkit-transform":"rotateY(" + off + "deg)",
                    "-moz-transform":"rotateY(" + off + "deg)",
                    "-ms-transform":"rotateY(" + off + "deg)",
                    "-o-transform":"rotateY(" + off + "deg)",
                    "transform":"rotateY(" + off + "deg)"
                });
            }).mouseenter(function () {  //展开
                stopAll();
                rotateDown(0);
            }).mouseleave(function () {    //折叠
                stopAll();
                rotateUp(pageArr.length - 1);
            });
        });
    </script>
</head>
<body>
<div id="fold_box" class="P800">
    <div id="fold" class="T3D fold_pager">
        <h2>3D下拉菜单</h2>
        <div id="fold_list" class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
            <a href="#">基于 - jquery+缓动</a>
            <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                <a href="#">基于 - jquery+缓动</a>
                <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                    <a href="#">基于 - jquery+缓动</a>
                    <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                        <a href="#">基于 - jquery+缓动</a>
                        <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                            <a href="#">基于 - jquery+缓动</a>
                            <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                                <a href="#">基于 - jquery+缓动</a>
                                <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                                    <a href="#">基于 - jquery+缓动</a>
                                    <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                                        <a href="#">基于 - jquery+缓动</a>
                                        <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                                            <a href="#">基于 - jquery+缓动</a>
                                            <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);">
                                                <a href="#">基于 - jquery+缓动</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
View Code

 

posted @ 2016-10-11 15:32  dongxiaolei  阅读(285)  评论(0)    收藏  举报