Бесконечный горизонтальный тикер jQuery - PullRequest
7 голосов
/ 11 августа 2010

Я ищу бесконечную горизонтальную новостную ленту. Я играл с SmoothScroll и SimpleDivScroll.

SmoothScroll не очень хорошо работает с элементами разной ширины, SimpleDivScroll совместим только с jQuery 1.4+, а я застрял с jQuery 1.3.2.

Есть ли другие альтернативы?

Ответы [ 5 ]

7 голосов
/ 08 октября 2010
4 голосов
/ 07 декабря 2011

Вы можете попробовать jQuery webTicker , это единственный способ не остановить прокрутку после завершения всего списка.Как это постоянно вращается ваши предметы.Вы можете использовать несколько страниц на одной странице и стилизовать каждую из них независимо.Пример CSS также представлен на самой странице

. Он не был протестирован с jQuery 1.3, однако полностью совместим с jQuery 1.4,1.5 и 1.6

.
4 голосов
/ 06 октября 2010

Вот простой тикер.Я не тестировал его во всех браузерах.

<html>
<head>
<title>Horizontal scroller</title>
<style type="text/css">
#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;}
#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;}
#scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var speed = 5;
    var items, scroller = $('#scroller');
    var width = 0;
    scroller.children().each(function(){
        width += $(this).outerWidth(true);
    });
    scroller.css('width', width);
    scroll();
    function scroll(){
        items = scroller.children();
        var scrollWidth = items.eq(0).outerWidth();
        scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
    }
    function changeFirst(){
        scroller.append(items.eq(0).remove()).css('left', 0);
        scroll();
    }
});
</script>
</head>
<body>
<div id="scrollerWrapper">
<ul id="scroller">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li> Maecenas sollicitudin, ante id ultrices consectetur, ipsum nisl varius ipsum, sit amet congue eros nulla vitae urna.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
</ul>
</div>
</body>
</html>
0 голосов
/ 20 июля 2016

Есть плагин jQuery.Marquee .Лицензия: ISC.

Другие доступные плагины перечислены в https://plugins.jquery.com/tag/ticker/.

0 голосов
/ 08 октября 2010

Вы видели liScroll ? В зависимости от того, что вы подразумеваете под «бесконечным», он может делать то, что вам нужно (между последним элементом и переносом есть разрыв).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...