从右到左滚动文字效果 [英] Right to left scrolling text effect

问题描述

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

I am trying to scroll text (list elements actually) from right to left.

这里是HTML代码

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

my 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）宽度，这是不会发生。

The above code swings the list items right to left and left to right in loop. The inline-block property set on list items don't seem to work as expected (List items are displayed one below another). Also I want the list item to get hidden if it goes out of the box (div#slider-txt) width, which is not happening.

你能帮助我修复这些问题？感谢...

Can you please help me fixing these issues? Thanks...

推荐答案

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

The CSS needs to be edited... and we will get the scrolling effect.

#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 */
}

这篇关于从右到左滚动文字效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！