从右到左滚动文字效果

Posted 2023-05-08

【中文标题】从右到左滚动文字效果

【英文标题】：Right to left scrolling text effect

【发布时间】：2011-08-24 17:35:03

【问题描述】：

我正在尝试从右到左滚动文本（实际上是列表元素）。

这是 html 代码

<div id="slider-txt">
    <ul>
        <li class="islide">text 1</li>
        <li class="islide">text 2</li>
    </ul>
</div>

我的 CSS

#slider-txt

position:relative;
width: 590px;


#slider-txt ul

list-style-type: none;
position: absolute;
margin: 0px;
padding: 0px;


#slider-txt ul li

text-align: right;

和 jQuery

var box = $('#slider-txt');
    if (box.length == 0) 
        return;
    
var ul = box.find('ul');
    var li = $('#slider-txt').find('li');

    var liWidth = box.width();
    var ulWidth = liWidth * li.length;
    li.css('width', liWidth);
    ul.css('width', ulWidth);
    li.css('display', 'inline-block');
var liElement = 0;

    function slideNxt() 
        liElement++;
        if (liElement == li.length) 
            liElement = 0;
        
    var curLeftPos = ul.css('left').split('px')[0];
    var newLeftPos = -(liElement * liWidth);
    ul.animate( left: newOffset + 'px' ,  duration: 'slow', easing: 'swing' );

setInterval(slideNxt, 2000);

上面的代码在循环中从右到左和从左到右摆动列表项。列表项上设置的 inline-block 属性似乎没有按预期工作（列表项显示在另一个下方）。此外，如果列表项开箱即用 (div#slider-txt) 宽度，我希望它被隐藏，这不会发生。

您能帮我解决这些问题吗？谢谢...

【问题讨论】：

使用 HTML 的marquee 标签。 （笑）

对不起哥们，但我想用 jQuery 来实现它，因为我会添加更多的效果。

【参考方案1】：

CSS需要编辑……我们会得到滚动效果。

#slider-txt

   width: 590px;
   height: 20px;
   display:block;
   overflow:hidden; /* to hide the text */
   position: relative;


#slider-txt ul

   list-style-type: none;
   margin: 0px;
   padding: 0px;
   position: absolute;


#slider-txt ul li

   text-align: center;
   float: left; /* brings the list items in one line */

【参考方案2】：

您真的不想使用 marque，它对用户来说不是很直观。相反，我建议你有一个巨大的旋转棒棒糖，用 CSS3 写的！

小提琴： http://jsfiddle.net/garreh/AA6KL

我无法抗拒。

【讨论】：

我已经更新了你的 Fiddle 以获得更多精彩：http://jsfiddle.net/AA6KL/2/

这真是太棒了。厄运的棒棒糖。先生，你赢了。