Question

我正在使用jticker.js打印我的数据。

在大屏幕上一切正常，但在小型移动屏幕上，我希望滚动继续打印数据，我的问题是移动设备的高度填满后没有滚动。

如何将autoscroll添加到我的代码中，该代码将知道要滚动数据？

这是我的代码演示：

这是我的代码：

    <title>jticker | Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css" media="screen, projection">

      #ticker
        {height: auto; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;}
      #ticker .cursor
        {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;}
      #ticker p
        {margin-bottom: 0.8em;}
      #ticker code
        {margin: 0.4em 0.4em; display: block;}
      #ticker .next 
        {position: absolute; bottom: 1em;}
    </style>
    <script type="text/javascript" src="./jticker3   Demo_files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="./jticker3   Demo_files/jquery.jticker.js"></script>
    <script type="text/javascript">

      jQuery(document).ready(function(){
        // Instantiate jTicker 
        jQuery("#ticker").ticker({
            cursorList:  " ",
            rate:        10,
            delay:       4000
        }).trigger("play").trigger("stop");

        // Trigger events 
        jQuery(".stop").click(function(){
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function(){
            jQuery("#ticker").trigger("play");
            return false;
        });




        jQuery(".style").click(function(){
            jQuery("#ticker")
            .trigger({
                type: "control",
                cursor: jQuery("#ticker").data("ticker").cursor.css({width: "4em", background: "#efefef", position: "relative", top: "1em", left: "-1em"})
            })
            return false;
        });

      });


    </script>

    </head>

    <body cz-shortcut-listen="true">

    <div id="content">

      <h2 style="text-align:center;">Demo</h2>
      <div id="ticker">
        <div>
            <h3>Cart:</h3>
            <ul style="margin-bottom:40px;">
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>
                    <li>Price : 100 euro</li>           
            </ul>

                    <a class="next" href="http://www.thepixelart.com/demo/jticker/#" >Total: 109$</a>
        </div>
      </div>



    </div>

Answer 1

好的，我找到了答案：

我刚把它添加到我的代码中：

      $('html, body').animate({
         scrollTop: $(document).height()
        },
       4000);

这里是完整的代码，您可以在移动设备或小屏幕上查看它以查看自动滚动操作：

http://jsfiddle.net/e8c8G/

jticker.js在移动设备上并自动滚动

1 个答案: