Я ищу бесконечный горизонтальный тикет новостей в стиле новостей. Я играл с SmoothScroll и SimpleDivScroll.Бесконечный горизонтальный код jQuery
SmoothScroll не работает хорошо с элементами разной ширины, а SimpleDivScroll совместим только с jQuery 1.4+, и я застрял в jQuery 1.3.2.
Любые другие альтернативы?
Попробуйте это:
Вот простой тикер. Я не тестировал его во всех браузерах.
<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>
Вы видели liScroll? В зависимости от того, что вы подразумеваете под «бесконечным», он может делать то, что вам нужно (между последним и обходным пунктом есть разрыв).
, и он утверждает, что работает с JQuery 1.2.x или новее. –
Вы можете попробовать jQuery webTicker, это единственный, который не остановит прокрутку после завершения всего списка. Поскольку он постоянно вращает ваши предметы. Вы можете использовать несколько страниц на странице и каждый стиль отдельно. Образец CSS также предоставляется на самой странице
Он не был протестирован с JQuery 1.3, однако его полностью совместим с JQuery 1.4,1.5 и 1.6
Существует jQuery.Marquee плагин. Лицензия: ISC.
Другие доступные плагины перечислены в https://plugins.jquery.com/tag/ticker/.
Когда вы говорите бесконечно, вы хотите, чтобы он продолжал отображать новые данные? Или вы хотите, чтобы он отображал ранее определенный конечный объем данных, который обтекает, чтобы он мог продолжать прокручивать справа налево? – Thomas
Ранее определенный конечный объем данных, который снова обертывается. – digital
См. Https://plugins.jquery.com/tag/ticker/ для обзора всех доступных плагинов тикера для jQuery. – koppor