從右向左滾動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%;
}

觀看演示