Fatal编程技术网
  • javascript/
  • Javascript 使用jquery获得老虎机效果

Javascript 使用jquery获得老虎机效果

javascript jquery html css

Javascript 使用jquery获得老虎机效果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用以下jquery插件创建老虎机： 我从简单的演示开始，并输入了我自己的列表。我遇到的问题是，我需要的不仅仅是显示列表中1行的块。我需要显示列表中间线上方和下方的内容。所以我把jSlotsWrapper框放大了 现在我有一个问题，当列表旋转时，在列表的末尾你会看到空白。我怎样才能让名单没有尽头？所以列表中的最后一项在哪里，我想再次从列表开始 编辑 这是我的html文件 <!DOCTYPE HTML> <html> <head> <meta h

我正在尝试使用以下jquery插件创建老虎机：

我从简单的演示开始，并输入了我自己的列表。我遇到的问题是，我需要的不仅仅是显示列表中1行的块。我需要显示列表中间线上方和下方的内容。所以我把
jSlotsWrapper
框放大了

现在我有一个问题，当列表旋转时，在列表的末尾你会看到空白。我怎样才能让名单没有尽头？所以列表中的最后一项在哪里，我想再次从列表开始

编辑

这是我的html文件

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Datengut Spielautomat</title>

<style type="text/css">

body {
    text-align: center;
    position: absolute;
    height: 600px;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    height: 62px;
}

.jSlots-wrapper {
    overflow: hidden;
    text-align: center;
    font-family:arial,helvetica,sans-serif;
    font-size: 40px;
    text-shadow: 2px 2px 2px #888888;
    height: 600px;
    width: 1242px;
    margin: 10px auto;
    border: 2px solid;
    border-color: #ffa500;
    box-shadow: 5px 5px 5px #888888;
    box-shadow: inset 0 200px 100px -100px #555555, inset 0 -200px 100px -100px #555555;
}

.jSlots-wrapper::after {
    content: "";
    background:url("blumen.jpg");
    opacity: 0.5;
    z-index: -1;
}

.slot {
    z-index: -1;
    width: 410px;
    text-align: center;
    margin-left: 5px auto;
    margin-right: 5px auto;
    float: left;
    border-left: 2px solid;
    border-right: 2px solid;
    border-color: #ffa500;
}

.line {
    width: 410px;
    height: 2px;
    -webkit-transform:
        translateY(-20px)
        translateX(5px)

}

</style>

</head>

<body>

<ul class="slot">
    <li>Bauakte</li>
    <li></li>
    <li>Bautagebuch</li>
    <li></li>
    <li>Mängelverwaltung</li>
    <li></li>
    <li>Störungsverwaltung</li>
    <li></li>
    <li>Personalakte</li>
    <li></li>
    <li>Maschinenakte</li>
    <li></li>
</ul>

<script src="jquery.1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jSlots.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    // normal example
    $('.slot').jSlots({
        number : 3,
        spinner : 'body',
        spinEvent : 'keypress',
        easing: 'easeOutSine',
        time : 7000,
        loops : 6,
    });

</script>

</body>
</html>
在这里，列表被放置在
jSlotsWrapper
上方，并使用animate函数向下移动。现在我需要的是动画继续，而不是将列表再次放在顶部。我怎样才能做到这一点

编辑

好的，每次动画完成时，我都会尝试以下方法以避免出现空白：

        spinEm : function() {

            var that = this;

            that.$el
                .css( 'bottom', $("body").height() )
                .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });

        }
我尝试将列表放在框的底部，然后向下移动，直到顶部出现。但不知何故，这个名单并没有真正移动。它只移动一个单词，然后完全停止。动画代码中有什么错误

编辑

好的，我找到了解决问题的办法。显然，我不能在css函数中使用
bottom
。相反，我使用了
top
并计算了列表顶部边框的位置。这样我就有了一个动画，一开始就没有所有的空白。为了避免从列表的底部跳到顶部，我修改了
jSlots包装的高度和列表项的顺序，以便在跳之前和之后显示的项是相同的。这样，用户就不会看到列表跳转

这是我的新
动画
功能


        spinEm : function() {
            var that = this;

            that.$el
                .css( 'top', -(base.listHeight - $("body").height()) )
                .animate( { 'top' : '0px'}, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });
        }



我找到了一种制作动画的方法，这样用户就不会看到跳跃。我所做的是，我以一种方式配置了列表，使得开始和结束是相同的。因此，当到达列表的末尾并再次跳到开头时，没有区别。跳转仍然存在，但用户看不到。
请编写代码，例如，任何东西…？@Pete:我添加了源代码。核心功能与Github存储库中的功能相同。您有空的
    • 's@devqon当前位置我知道，我有这些可以在单词之间添加空格。我的问题是，当用户启动机器时，列表被放置在只看到列表底部的单词的位置。其余的空间是空的。而
    animate
    功能会向下移动列表。当它位于所需位置时，列表再次跳到顶部，问题再次出现。当第一个列表的顶部可见时，您需要绘制第二个列表吗？

            spinEm : function() {

            var that = this;

            that.$el
                .css( 'bottom', $("body").height() )
                .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });

        }

    

            spinEm : function() {
            var that = this;

            that.$el
                .css( 'top', -(base.listHeight - $("body").height()) )
                .animate( { 'top' : '0px'}, that.spinSpeed, 'linear', function() {
                    that.lowerSpeed();
                });
        }