从右向左滚动 div答案

【问题标题】：Scroll div right to left从右向左滚动 div
【发布时间】：2014-07-09 00:52:02
【问题描述】：

我正在制作一个滚动“li”元素的代码，为此我使用了标签。但是由于我在网页上有一些谷歌图表，字幕标签停止工作。我尝试使用 jquery 滚动元素，并使用单独的 php 文件作为ticker 模块。

现在它在ticker.php文件中作为独立的工作，但是当这个php文件包含在我使用谷歌图表的其他网页中时，它不工作或滚动。

“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>

javascript

    $(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
        });

    });

【问题讨论】：

标签： javascript php jquery mysql css

【解决方案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%;
}

See Demo

【讨论】：

这是否解决了您的问题@divs7？如果是这样，请考虑将答案标记为正确。