javascript - 为什么这张图片在框架之外？

Question

我正在努力学习如何使用 http://darsa.in/sly/基于 jquery 的画廊创建者。 我已经复制并粘贴了我想要重现的 slider http://darsa.in/sly/examples/horizontal.html倒数第二个。我的尝试在这里 http://morenoh149.github.io/sly_horizontal.html

HTML

<div class="wrap">
<div class="scrollbar">
  <div class="handle">
  </div>
</div>
<div class="frame effects" id="effects" style="overflow: hidden;">
  <ul>
    <li>0 <img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>1<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">2<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">3<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">4<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="active">5<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">6<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li class="">7<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>8<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>9<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>10<img src="http://dummyimage.com/600x400/000/fff"></img></li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
  </ul>
</div>
</div>

CSS

.frame {
        height: 250px;
        line-height: 250px;
        overflow: hidden;
}
.frame ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        font-size: 50px;
}
.frame ul li {
        float: left;
        width: 227px;
        height: 100%;
        margin: 0 1px 0 0;
        padding: 0;
        background: #333;
        color: #ddd;
        text-align: center;
        cursor: pointer;
}
.frame ul li.active {
        color: #fff;
        background: #a03232;
}

/* Effects */
.effects {
    height: 200px;
    line-height: 200px;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    -webkit-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    overflow-y: show;
}
.effects ul {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.effects ul li {
    position: relative;
    margin: 0 -20px;
    -webkit-transform: rotateY(60deg) scale(0.9);
    -ms-transform: rotateY(60deg) scale(0.9);
    transform: rotateY(60deg) scale(0.9);
    -webkit-transition: -webkit-transform 300ms ease-out;
    transition: transform 300ms ease-out;
}
.effects ul li.active {
    z-index: 10;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.effects ul li.active ~ li {
    -webkit-transform: rotateY(-60deg) scale(0.9);
    -ms-transform: rotateY(-60deg) scale(0.9);
    transform: rotateY(-60deg) scale(0.9);
}

JavaScript

$(document).ready(function() {
var $frame = $('#effects');
var $wrap  = $frame.parent();

// Call Sly on frame
$frame.sly({
    horizontal: 1,
    itemNav: 'forceCentered',
    smart: 1,
    activateMiddle: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 3,
    scrollBar: $wrap.find('.scrollbar'),
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'swing',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
});
});

我哪里错了？

Answer 1

删除了对 line-height 的调用，现在我可以像对待 div 一样处理框架。