jslots扩张

Question

我正在使用jquery老虎机插件，想要扩展一下，但我很难弄清楚它是如何工作的。

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

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

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

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

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

Answer 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高度的一半< / p>

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

<强>更新

好的，从：{/ p>更改.slot li的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是中间起始点。每次点击播放按钮都能很好地工作。