如何将类似苹果 iPhone 的效果应用于菜单列表？

Question

我正在尝试使用 Apple menu 之类的菜单，因为我使用了 greensock api

这是我尝试过的JSFIDDLE

更新

这就是我想要达到的目标：

Fiddle

为什么它会闪烁......当悬停时......？

      <div class="demoWrapper">
        <div class="stage">            
            <div id="container" style="margin-left:225px;">
                <div id="box0" class="to_box" style="/*top: 90px;*/">test 0</div>
                <div id="box1" class="to_box" style="/*top: 115px*/">test 1</div>
                <div id="box2" class="to_box" style="/*top: 140px;*/">test 2</div>
                <div id="box3" class="to_box" style="/*top: 165px;*/">test 3</div>
                <div id="box4" class="to_box" style="/*top:190px;*/">test 4</div>
                <div id="box5" class="to_box" style="/*top:215px*/">test 5</div>
                <div id="box6" class="to_box" style="/*top:240px*/">test 6</div>
                <div id="box7" class="to_box" style="/*top:265px*/" >test 7</div>
                <div id="box8" class="to_box" style="/*top:290px*/">test 8</div>
                <div id="box9" class="to_box" style="/*top:315px*/">test 9</div>
                <div id="box10" class="to_box" style="/*top:340px*/">test 10</div>
                <div id="box11" class="to_box" style="/*top: 365px;*/">test 11</div>
                <div id="box12" class="to_box" style="/*top: 390px;*/">test 12</div>
            </div>
        </div>
    </div>

Answer 1

谢谢我自己解决了我的问题........

这里是小提琴：MyFiddle

 <script type="text/javascript">
        $(document).ready(function(e){

            TweenMax.set($("#container"),{perspective:3000,transformStyle:"preserve-3d", backfaceVisibility:"hidden"});

            $("#container div").mouseover(function(e){

                var current = $(this);
                var nextFirst = $(this).next();
                var prevFirst = $(this).prev();

                var nextFirst_1 = $(this).nextAll().eq(1);
                var prevFirst_1 = $(this).prevAll().eq(1);

                var nextFirst_2 = $(this).nextAll().eq(2);
                var prevFirst_2 = $(this).prevAll().eq(2);

               TweenMax.to(prevFirst_2, 0.1, {
                    scale:1.1,
                    rotationX:50,
                    opacity:0.6,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                }); 

                TweenMax.to(prevFirst_1, 0.1, {
                    scale:1.2,
                    rotationX:45,
                    opacity:0.7,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                }); 

                TweenMax.to(prevFirst, 0.1, {
                    scale:1.3,
                    rotationX:35,
                    opacity:0.8,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(current, 0.1, {
                    scale:1.5,                                  // current
                    rotationX:0,
                    opacity:1,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst, 0.1, {
                    scale:1.3,
                    rotationX:-35,
                    opacity:0.8,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst_1, 0.1, {
                    scale:1.2,
                    rotationX:-45,
                    opacity:0.7,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

                TweenMax.to(nextFirst_2, 0.1, {
                    scale:1.1,
                    rotationX:-50,
                    opacity:0.6,
                   // marginLeft:15,
                    ease:Quad.easeInOut
                });

            });   

            $("#container div").mouseout(function(){
                var element =  $("#container div");
                TweenMax.to(element, 0.1, {
                    scale:1.0,
                    rotationX:0,
                    opacity:0.4,
                   // marginLeft:0,
                    ease:Quad.easeInOut
                }); 
            })

        }); // end of (document).ready();
    </script>

Answer 2

试试这个:)

<!DOCTYPE html>
<html>
    <head>
         <script src="js/libs/jquery.min.js"></script> <!-- DOWNLOAD jQuery -->
         <script src="js/libs/drum.js"></script> <!-- DOWNLOAD drum.js -->
         <script src="js/libs/hammer.min.js"></script> <!-- DOWNLOAD hammer.js -->
         <script src="js/libs/hammer.fakemultitouch.js"></script> <!-- DOWNLOAD hammer.fakemultitouch.js -->
         <link rel="stylesheet" href="css/libs/drum.css">
    </head>
    <body>
        <select>
        <option value="0">00</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option selected value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        </select>
        <script>
         $("select").drum();
        </script>
    </body>
</html>

这对我的朋友来说完美无缺:)