kayan-haber-sitene-ekle
Haber sitelerinin en vazgeçilmez özelliklerinden biri  olan ince bir şerit üzerinde kayarak yada klavyeden biri yazıyormuş gibi tek tek çıkan harflerin olduğu bölümü mutlaka bilirsiniz. Şu ana kadar hiç dikkat etmediğim ve okumadığım bu bölüm neden bu kadar  çok kullanılır anlamış değilim aslında. Belki benden başka herkesin dikkat ettiği  bir  bölümdür diye fazla kötülemeyeceğim bu özelliği. Ne de olsa sırf bu özellik için hazırlanmış olan bir sürü uygulama var. Bu kadar geliştirici yanılıyor olamaz herhalde.

Siz de eğer  bu tarz son dakika haber bandı örneğini  sitenize eklemek istiyorsanız sizler için hazırlanmış olan bir jQuery eklentisi bulunuyor. News ticker  adlı bu uygulama sayesinde ince bir şerit  üzerinden başlıkların yayınlanmasını sağlayabilirsiniz. Özellik açısından yeteri kadar gelişmiş ve kullanılabilir bir kaç tane de parametre ayarı bulunuyor.  Durdurma, oynatma, önceki, sonraki butonları sayesinde adeta mp3 player tarzında kullanıcılarınız bu şerite eklemiş olduğunuz başlıklar arası geçiş yapabilirler.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js ve Css dosya adresleri :

<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script src="includes/jquery.ticker.js" type="text/javascript"></script>

Javascript :

<script type="text/javascript">
$(function () {
     // start the ticker 
	$('#js-news').ticker();

	// hide the release history when the page loads
	$('#release-wrapper').css('margin-top', '-' + ($('#release-wrapper').height() + 20) + 'px');

	// show/hide the release history on click
	$('a[href="#release-history"]').toggle(function () {	
		$('#release-wrapper').animate({
			marginTop: '0px'
		}, 600, 'linear');
	}, function () {
		$('#release-wrapper').animate({
			marginTop: '-' + ($('#release-wrapper').height() + 20) + 'px'
		}, 600, 'linear');
	});	

});
</script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<ul id="js-news" class="js-hidden">
		<li class="news-item">Başlık 1</li>
		<li class="news-item">Başlık 2</li>
		<li class="news-item">Başlık 3</li>
		<li class="news-item">Başlık 4</li>
		<li class="news-item">Başlık 5</li>
		<li class="news-item">Başlık 6</li>
		<li class="news-item">Başlık 7</li>
</ul>

 

 


Ali senin düşüncelerini merak ediyor. Bir yorum yaz