Widget:ScrollText

参考克鲁赛德战记WIKI的MediaWiki:ScrollText.js重写为Widget。

源码：

<script>
$(function() {
	scrollText();
});

function scrollText() {
	$(".scrolltext").each(function() {
		var speed, pause, space;
		// 设置滚动必要样式
		$(this).css({"position":"relative", "display":"block"});
		// 获取各种变量
		var box_width = $(this).width();
		var text_width = $(this).find("a").width();
		// 滚动速度设置
		var scroll_speed = $(this).attr("data-speed");
		if(scroll_speed == null) {
			speed = 25; // 默认值
		} else {
			speed = parseInt(scroll_speed);
		}
		// 滚动完毕停留时间设置
		var scroll_pause = $(this).attr("data-pause");
		if (scroll_pause == null) {
			pause = 2000; // 默认值
		} else {
			pause = parseInt(scroll_pause);
		}
		// 循环滚动两文本的间隔
		var scroll_space = $(this).attr("data-space");
		if (scroll_space == null) {
			space = 50; // 默认值
		} else {
			space = parseInt(scroll_space);
		}
		// 判断链接还是纯文本
		if(text_width == null){
			if($(this).find(".scr_text").width() == null){
				$(this).html("<div class='scr_text' style='position:relative;display:inline;'>" + $(this).html() + "</div>");
			}
			text_width = $(this).find(".scr_text").width();
		}
		// console.log($(this).find("a").text());
		// console.log(text_width);
		if(text_width > box_width){
			// 无限循环滚动
			if($(this).attr("data-type") == "1"){
				if($(this).attr("data-clone") == null){
					$(this).children().css({"margin-right":space + "px"});
					$(this).append($(this).children().clone());
					$(this).attr("data-clone", "true");
				}
				// console.log(text_width);
				$(this).animate({left:'-' + parseInt(text_width + space) +'px'}, text_width * speed, "linear");
				$(this).animate({left:'-' + parseInt(text_width + space) +'px'}, pause, "linear");
				$(this).animate({left:'0px'}, 0, "linear");
			} else {
				// 来回反弹滚动
				$(this).animate({left:'-' + parseInt(text_width-box_width) + 'px'}, text_width * speed, "linear");
				$(this).animate({left:'-' + parseInt(text_width-box_width) + 'px'}, pause, "linear");
				$(this).animate({left:'0px'}, text_width * speed, "linear");
				$(this).animate({left:'0px'}, pause, "linear");
			}
		}
	});
	requestAnimationFrame(scrollText);
}
</script>