從左到右滾動文字效果

我想從右到左滾動文字（實際列出的元素）。從左到右滾動文字效果

這裏是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);

上面的代碼擺動列表項從右到左，從左到右環路。在列表項目上設置的內聯塊屬性似乎不像預期的那樣工作（列表項目顯示在另一個下方）。此外，我希望列表項隱藏，如果它離開框（div＃slider-txt）寬度，這不會發生。

你能幫我解決這些問題嗎？謝謝...

來源

2011-05-13 Bongs

使用HTML的'marquee'標籤。（LOL） – 2011-05-13 07:46:34

對不起哥們，但我想用jQuery實現它，因爲我將爲它添加更多效果。 – Bongs 2011-05-13 07:52:18

我只是在開玩笑。（： – 2011-05-13 07:57:24

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

來源

2011-05-13 11:24:18

你真的不想使用商品，它不是非常直觀的用戶。相反，我建議你有一個巨大的旋轉棒棒糖，用CSS3寫成！

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

我無法抗拒。

來源

2011-05-13 08:08:17

我已經更新了你的小提琴更加精彩：[http://jsfiddle.net/AA6KL/2/](http://jsfiddle.net/AA6KL/2/） – Sylvain 2011-05-13 08:25:16

這是純粹的迷人。一個商品的棒棒糖厄運，你先生贏了。 – 2011-05-13 08:44:46

從左到右滾動文字效果

回答

相關問題