3D下拉菜单的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    <script type="text/javascript" class="library" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></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>

JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
//添加缓动扩展
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);
    });
});

CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
*{
    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;
            }
 
posted @ 2015-06-01 10:39  永恒的  阅读(57)  评论(0)    收藏  举报