轻量级的JavaScript插件｜用于在网站上显示新闻标签

这篇文章提供了一个轻量级的JavaScript插件，用于在网站上显示新闻标签。新闻标签是一种以marquee模式显示内容的方式，无论是水平还是垂直滚动。它对于显示最新的更新和即将发生的事件等内容很有用。

它通过占用较少的屏幕空间来节省网站空间。它也减少了用户通过不断地勾选内容显示而滚动查看更多内容的努力。

在某种程度上，这是一个古老的东西。几十年前，我们不能看到一个没有滚动勾选的网站。在一个时期内，它作为一种糟糕的UI/UX实践被根除。但它仍然被广泛用于新闻网站，特别是股票价格显示。如果你明智地使用它，它可以提供良好的优势。

下面的例子会提醒你有哪些地方需要在屏幕上显示新闻滴答器。

1. 在线新闻字节在滴答声中显示标题。
2. 股票价格。
3. 网上商店在滴答板上显示 "什么是新的"。

本教程在网页上展示了一个简单的新闻勾选。当鼠标悬停勾选框时，它就会停止内容框，并在鼠标离开时释放。

它看起来像一个旋转的效果，但应用于一个有文本内容的元素。

查看演示

新闻图表的特点

1. 超轻量级；只有2KB。
2. 纯粹的JavaScript。独立的，不依赖于任何其他库，如JQuery。当然，如果需要的话，你可以和JQuery一起使用它。
3. 完全响应。

使用方法

你可以通过三个简单的步骤在网页中整合这个新闻代码。

1. 包括JavaScript库文件。
2. 在一个有ID的div中，将ticker内容作为HTML无序列表。
3. 紧挨着ticker-box div调用startTicker JavaScript函数。

第1步：下载并包含JavaScript库文件。

第 2 步：将 Ticker 内容作为 HTML 无序列表放在一个有 id 的 div 中。

	
		First ticker item.
		Second ticker item.
		Final ticker item.
	

第3步：在ticker-box div旁边立即调用startTicker JavaScript函数。

这一步是参照ticker box的id属性来调用库函数。

*startTicker()*函数有一个可选参数，用于提供新闻内容的速度和间隔。默认速度为5，默认间隔为500毫秒。

[OR］

新闻滴答器JavaScript库代码

这个库包含了在网页上启用新闻标签的功能。*startTicker()*函数迭代了ticker。

• 元素，让它水平滑动。

  它应用样式来改变基于速度的ticker元素的位置。*extend()*函数用指定的选项改变默认的速度和时间间隔。

  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(t);
  				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(t);
  		}
  		tickerBox.onmouseout = function() {
  			iterateTickerElement(parseInt(li[li_index].style.left));
  		}
  	}
  	iterateTickerElement(trans_width);
  }
  

  注意。

  1. 目前，新闻标签只在水平方向上可用。在下一个版本中，计划增加垂直方向。
  2. Ticker的移动可以在鼠标移动时暂停。
  3. 如果你有任何功能要求或任何特殊的定制需求，请联系我。

  查看演示下载