Right to left scrolling text effect

问题:

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

Here is HTML code

<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; } 

and the 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); 

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

回答1:

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

回答2:

You really don't want to be using marque, it's not very user intuitive. Instead I suggest you have a giant rotating lollipop, written in CSS3 duh!

Fiddle: http://jsfiddle.net/garreh/AA6KL

I couldn't resist.

文章来源: Right to left scrolling text effect