0

我正在使用一个 jquery 老虎机插件并想扩展一点，但无法弄清楚它是如何工作的。

https://github.com/matthewlein/jQuery-jSlots

目前，该演示以一次只显示一个的方式使用它<li>。我想扩展它，这样你就可以看到<li>上面的一半和<li>下面的一半，有点像真正的老虎机，在那里你可以看到即将到来的和离开可见区域的东西。

所以，我垂直扩展了容器，我可以看到<li>'s 之前和之后但是，奇怪的事情发生在底部，<li>消失了，然后（我假设）被附加到顶部。如果我在列表中将其设为 5+ ，它仍然会发生<li>。如果我增加 .slot 大小，它仍然会发生，但仍然用较短的容器高度限制它。

你会注意到这个小提琴，当你点击播放时，你会看到底部的白色背景显示出来。当他们放慢速度时，情况会变得更糟。有时当他们停止时，它会停止并缺少底部...我已将 jslots.js 文件附加到小提琴资源中

http://jsfiddle.net/livinzlife/3bVe9/1/

4

1 回答 1

1

将以下内容添加到li元素的 CSS 中：

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

所以.slot li变成：

.slot li{
    width: 190px;
    height: 144px;
    background-color: blue;
    float: left;
    margin-top: 72px;     /*half of the height */
    margin-bottom: -72px; /*half of the height (negative)*/
}

更新：

要消除背景颜色问题，background-color: yellow;请在jSlots-wrapper类中添加：

.jSlots-wrapper {  
    overflow: hidden; /* to hide the magic */  
    height: 296px; /* whatever the height of your list items are */  
    display: inline-block; /* to size width correctly, can use float too, or width*/  
    border: 1px solid #999;  
    position: absolute;
    width:570px;
    /*bottom: 130px;*/
    margin-top: 2em;
    left:50%;
    margin-left: -285px;
    padding: 0;
    background-color: yellow;
}

更新：

的原理也background-color适用于图像。只需将background-image类的设置.jSlots-wrapper为您用于最后一个li元素的图像并将其垂直偏移（负）li高度的一半

更新小提琴： http: //jsfiddle.net/3bVe9/6/用于概念验证（使用 GIS 获得的图像，用于大小为 256x256 的“随机图像”）

更新：

好的，更改.slot lifrom 的 CSS 定义：

margin-top: 72px;     /*half of the height */
margin-bottom: -72px; /*half of the height (negative)*/

到：

margin-top: -72px;     /*half of the height (negative) */
margin-bottom: 72px;   /*half of the height*/

所以.slot li变成：

.slot li{
    width: 190px;
    height: 144px;
    margin-top: -72px;     /*half of the height (negative) */
    margin-bottom: 72px;   /*half of the height*/
    background-color: blue;
    float: left;
    background-size: 190px 144px;
}

并将 CSS 更改恢复为.jSlots-wrapper类定义，问题已完全解决（对于颜色和图像，这是另一个小提琴：http: //jsfiddle.net/3bVe9/7/

这会调整插槽，使第一个li向上偏移，第二个li是中间起始点。每次点击播放按钮时都能完美运行。

于 2012-10-06T21:57:23.063 回答