Sonsuz bir yatay haber stili seçicisi arıyorum. SmoothScroll ve SimpleDivScroll ile oynadım.Sonsuz yatay jQuery toplayıcı
SmoothScroll farklı genişlikteki elemanlarla iyi çalışmamaktadır ve SimpleDivScroll yalnızca jQuery 1.4+ ile uyumludur ve jQuery 1.3.2 ile takılıyorum.
Diğer alternatifler nelerdir?
bu deneyin:
İşte basit bir numara. Tüm tarayıcılarda test etmedim.
<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>
Eğer liScroll gördünüz mü? "Sonsuz" ile ne demek istediğine bağlı olarak, ihtiyacınız olanı yapabilir (son öğe ile sarma arasında bir boşluk vardır).
ve JQuery 1.2.x veya daha sonraki bir sürümü ile çalıştığı iddia ediliyor. –
jQuery webTicker'u deneyebilirsiniz, tüm liste tamamlandıktan sonra kaydırma işlemini durdurmayan tek şey budur. Eşyalarınızı sürekli olarak döndürdüğünden. Her sayfada birden çok tane kullanabilir ve her birini benzersiz bir şekilde stilleyebilirsiniz. Bir BB numunesi de
O jQuery 1.3 ile test edilmemiştir sayfanın kendisinde sağlanmıştır ancak jQuery 1.4,1.5 ve 1.6
jQuery.Marquee eklentisi vardır ile tam uyumlu. Lisans: ISC.
Diğer mevcut eklentiler https://plugins.jquery.com/tag/ticker/ adresinde listelenmiştir.
Sonsuz dediğinizde, görüntülenecek yeni verileri çekmeye devam etmesini ister misiniz? Ya da, önceden kaydırılan, sağdan sola kaydırmaya devam edebilmesi için önceden tanımlanmış sonlu miktarda veriyi görüntülemek ister misiniz? – Thomas
Önceden tanımlanmış sonlu miktarda veri tekrar etrafa sarar. – digital
jQuery için mevcut tüm hazırlayıcı eklentilerine genel bakış için https://plugins.jquery.com/tag/ticker/ adresini ziyaret edin. – koppor