Indikator berita JavaScript – Phppot

Programming

oleh Vinci terakhir diubah pada 28 Agustus 2022.

Artikel ini menyajikan plugin JavaScript ringan untuk menampilkan ticker berita di situs web. News ticker adalah cara untuk menampilkan konten dalam mode tenda dalam pengguliran horizontal atau vertikal. Berguna untuk menampilkan konten seperti pembaruan terkini dan acara mendatang.

Dengan menempati bagian layar yang lebih kecil, ini menghemat ruang situs. Ini juga mengurangi upaya pengguna untuk menggulir untuk melihat lebih banyak konten dengan terus menampilkan konten.

Ini semacam hal yang lebih tua. Beberapa dekade yang lalu, kami tidak dapat melihat situs web tanpa menggulir. Seiring waktu, itu diberantas sebagai praktik UI/UX yang buruk. Namun masih banyak digunakan di website berita dan terutama dalam menampilkan harga saham. Jika Anda menggunakannya dengan bijak, itu memiliki manfaat besar.

Contoh berikut mengingatkan Anda tentang tempat-tempat yang memerlukan tanda berita di layar.

  1. Byte berita online menampilkan berita utama dalam satu ticker.
  2. harga saham.
  3. Toko online yang memajang “barang baru” di papan reklame.

Tutorial ini menunjukkan ticker berita sederhana di halaman web. Menahan kotak centang akan membekukan halaman konten dan melepaskannya dengan mouse.

Mirip dengan efek putar tetapi diterapkan ke elemen dengan konten teks.

ticker berita JavaScript
Tampilkan demo

Fitur ticker berita

  1. sangat ringan; Hanya 2 KB
  2. JavaScript sederhana bersifat independen dan tidak bergantung pada perpustakaan lain seperti JQuery. Tentu saja, jika diperlukan, Anda dapat menggunakannya bersama JQuery.
  3. Sepenuhnya responsif

Menggunakan

Anda dapat mengintegrasikan berita ini ke dalam halaman web dalam tiga langkah sederhana.

  1. Impor file pustaka JavaScript.
  2. Tentukan konten sebagai daftar HTML yang tidak berurutan dalam div dengan id.
  3. Panggil fungsi JavaScript startTicker tepat di sebelah div kotak ticker.

Langkah 1: Unduh dan tambahkan file pustaka JavaScript.

<script src="https://phppot.com/javascript/javascript-news-ticker/news-ticker.js"></script>

Langkah 2: Tandai konten sebagai daftar HTML yang tidak diurutkan dalam div dengan id.

<div id="ticker-box">
	<ul>
		<li>First ticker item.</li>
		<li>Second ticker item.</li>
		<li>Final ticker item.</li>
	</ul>
</div>

Langkah 3: Panggil fungsi JavaScript startTicker tepat di sebelah div ticker-box.

Langkah ini memanggil fungsi perpustakaan dengan referensi ke properti id kotak Ticker.

partikel untuk objek langsung mulaiTicker() Fungsi ini memiliki parameter opsional untuk memberikan kecepatan dan jarak antar konten berita. Kecepatan default adalah 5 dan interval default adalah 500 ms.

<script>startTicker('ticker-box');</script>
[OR]
<script>startTicker('ticker-box', {speed:7, delay:1000});</script>

Kode perpustakaan JavaScript Khabar

Pustaka ini berisi fungsi untuk mengaktifkan flag berita di halaman web. partikel untuk objek langsung mulaiTicker() fungsi elemen

  • Ini berulang dan membiarkannya meluncur secara horizontal.

    Ini menerapkan gaya ini untuk memposisikan ulang elemen centang berdasarkan kecepatan. partikel untuk objek langsung mengembangkan Fungsi ini mengubah kecepatan dan interval default dengan opsi yang ditentukan.

    function applyStyles(obj, styles) {
    	var property;
    	var styleLength = Object.keys(styles).length;
    	for (var i = 0; i < styleLength; i++) {
    		property = Object.keys(styles)[i];
    		obj.style[property] = styles[property];
    	}
    }
    
    function extend(object1, object2) {
    	for (var attrname in object2) {
    		object1[attrname] = object2[attrname];
    	}
    	return object1;
    }
    
    function startTicker(id, param) {
    	var tickerBox = document.getElementById(id);
    	var defaultParam = { speed: 5, delay: 500, rotate: true };
    	var extendedParam = extend(defaultParam, param);
    	applyStyles(tickerBox, { overflow: "hidden", 'min-height': '40px' });
    	var ul = tickerBox.getElementsByTagName("ul");
    	var li = ul[0].getElementsByTagName("li");
    	applyStyles(ul[0], { padding: 0, margin: 0, position: 'relative', 'list-style-type': 'none' });
    	for (i = 0; i < li.length; i++) {
    		applyStyles(li[i], { position: 'absolute', 'white-space': 'nowrap', display: 'none' });
    	}
    
    	var li_index = 0;
    	var trans_width = tickerBox.offsetWidth;
    	var chunk_width = 1;
    
    	var iterateTickerElement = function(trans_width) {
    		li[li_index].style.left = trans_width + "px";
    		li[li_index].style.display = '';
    		var t = setInterval(function() {
    			if (parseInt(li[li_index].style.left) > -li[li_index].offsetWidth) {
    				li[li_index].style.left = parseInt(li[li_index].style.left) - chunk_width + "px";
    			} else {
    				clearInterval
    				trans_width = tickerBox.offsetWidth;
    				li_index++;
    				if (li_index == li.length && extendedParam.rotate == true) {
    					li_index = 0;
    					iterateTickerElement(trans_width);
    				} else if (li_index < li.length) {
    					setTimeout(function() { iterateTickerElement(trans_width); }, extendedParam.delay);
    				}
    			}
    		}, extendedParam.speed);
    		tickerBox.onmouseover = function() {
    			clearInterval
    		}
    		tickerBox.onmouseout = function() {
    			iterateTickerElement(parseInt(li[li_index].style.left));
    		}
    	}
    	iterateTickerElement(trans_width);
    }
    

    Catatan:

    1. Saat ini, ticker berita hanya tersedia dalam orientasi horizontal. Untuk versi selanjutnya, orientasi vertikal direncanakan.
    2. Gerakan ticker dapat dihentikan pada mouse.
    3. Hubungi saya jika Anda memiliki permintaan fitur atau untuk kebutuhan kustomisasi tertentu.

    Tampilkan DemoUnduh

    Kembali ke atas


  • Source link

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan.