Question

我正在制作一个滚动＆＃34; li＆＃34;元素，为此，我使用了标签。但是marquee标签停止工作，因为我在网页上有一些谷歌图表。我尝试使用jquery滚动元素，使用单独的php文件作为ticker模块。

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

＆＃34; li＆＃34;元素包含来自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%;
}

See Demo

从右到左滚动div

1 个答案: