从右向左滚动div

Question

我正在制作一个滚动“ li”元素的代码，为此我使用了标记。 但是，由于我的网页上有一些Google图表，因此字幕标记停止工作。 我试图通过使用jquery使用股票代码模块的单独php文件来滚动元素。

现在，它可以独立运行在ticker.php文件中，但是当该php文件包含在我使用Google图表的其他网页中时，它不起作用或滚动。

“ li”元素包含来自mysql的数据。 所有必要的外部文件均已正确链接。

我只需要从右向左滚动一个div，其中包含公司名称和徽标图像，这些徽标图像的排列效果与html字幕相同。

喜欢：

<-- Company1 **Logo** -- Company2 **Logo** -- Company3 **Logo** <--  (Scrolling right to left) 

ticker.php文件

  <div id="ticker" class='marquee' data-allowCss3Support=false>
                <ul id="ticker">
                    <?php
                        while($row = mysql_fetch_array($query))
                        {
                            $r_name="";
                            $r_id = $row['r_id'];
                            $query1=mysql_query('select r_name from tbl_restro where r_id="'.$r_id.'" ');
                            while($row1=mysql_fetch_array($query1))
                            {
                                    $r_name = $row1['r_name'];
                            }
                            $r_avg = $row['billavg'];
                            if($r_avg>$avg)
                                {
                                    $temp=round((($r_avg-$avg)/$avg), 2);
                                    echo'<li>'.$r_name.' <img src="img/up.gif" width="10" alt="High"/> '.$temp.'</li>';
                                }
                            else if($avg>$r_avg)
                                {
                                    $temp=round((($avg-$r_avg)/$avg), 2);
                                    echo'<li>'.$r_name.' <img src="img/down.gif" width="10" alt="Down"/> '.$temp.'</li>';
                                }
                        }
                        mysql_close($con);
                    ?>
                </ul>
            </div>

javasccript

    $(function(){

        $('.marquee').marquee({
            //speed in milliseconds of the marquee
            speed: 11000,
            //gap in pixels between the tickers
            gap: 50,
            //gap in pixels between the tickers
            delayBeforeStart: 0,
            //'left' or 'right'
            direction: 'left',
            //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: false,
            //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
            pauseOnHover: true
        });

    });

Answer 1

您可以在CSS中将其设置为：

<div id="ticker">
<div id="company_logo">
    <div class="item" style="background:red;"></div>
    <div class="item" style="background:green;"></div>
    <div class="item" style="background:blue;"></div>
</div>
</div>

的CSS

#ticker {
    width: 320px;
    height: 2em;
    overflow: scroll;
  direction:rtl; /*change to "ltr" to the opposite direction*/
}
#company_logo {
    width: 480px;
    height: 100%;
}
.item {
    float: left;
    width: 160px;
    height: 100%;
}

观看演示