jquery – 如何将apple iphone效果应用到菜单列表？

2023年7月18日 194次阅读

我正在尝试像
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>

最佳答案 试试这个 ：)

<!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>

这完全适合我的朋友没有问题:)

点赞