JavaScript、css3 自定义自动滚动文字，两种方式（二）

最新推荐文章于 2024-10-15 15:31:47 发布

FullStack-KJ

最新推荐文章于 2024-10-15 15:31:47 发布

阅读量303

点赞数

分类专栏： JavaScript 文章标签： JavaScript、css3 自定义自动滚动文字，两种方式

本文链接：https://blog.youkuaiyun.com/dashenid/article/details/103902843

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

TextAutoScroll.js

function TextAutoScroll() {
	var _this = this;

	this.ScrollTypeEnum = {
		LeftRight: 0, //左右滚动  
		Left: 1, //像左滚动  
	};
	this.space = 0; //文本添加的空格数  
	var spaceStr = "";
	//this.speed = 20; //速度  

	this.startScroll = function(el, scrollTypeEnum) {
		var boxArr = document.querySelectorAll(el);
		var pArr = document.querySelectorAll(el+" div");
		var id = el;
		if(el.indexOf(".") != -1 || el.indexOf("#") != -1) {
			id = id.substr(1); //删除第一个字符
		}
		for (var i = 0; i < _this.space; i++) {
			spaceStr += "&nbsp;";
		}
		for (var i = 0; i < boxArr.length; i++) {
			var box = boxArr[i];
			box.style.overflow = "hidden";
			box.style.textAlign = "center";
			var p = pArr[i];
			p.style.whiteSpace = "nowrap";
			p.style.display = "inline-block";
			p.innerHTML = spaceStr + p.innerHTML + spaceStr;
			var boxWidth = box.clientWidth;
			var pWidth = p.scrollWidth;
			if (boxWidth < pWidth) {
				id = id+i;
				comm(id, p, boxWidth, pWidth, scrollTypeEnum);
			}else {
				p.style.WebkitAnimation = "0s no linear infinite normal";
			}
		}
	}

	function comm(id, p, boxWidth, pWidth, scrollTypeEnum) {
		if (scrollTypeEnum == _this.ScrollTypeEnum.LeftRight) {
			LeftRight(id, p, boxWidth, pWidth);
		} else {
			Left(id, p, boxWidth, pWidth);
		}
	}

	function LeftRight(id, p, boxWidth, pWidth) {
		var param = pWidth - boxWidth;
		var speed =  pWidth/50;
		var style = document.styleSheets[0];
		var LeftRight = '@-webkit-keyframes LeftRight_'+id+' {' +
			'0% {' +
			'-webkit-transform: translateX(0);' +
			'}' +
			'50% {' +
			'-webkit-transform: translateX(-'+param+'px);' +
			'}' +
			'100% {' +
			'-webkit-transform: translateX(0);' +
			'}' +
			'}'
		style.insertRule(LeftRight, 0);
		p.style.WebkitAnimation = speed + "s LeftRight_"+id+" linear infinite normal";
	}

	function Left(id, p, boxWidth, pWidth) {
		var param = pWidth - boxWidth;
		var speed =  pWidth/100;
		var style = document.styleSheets[0];
		var Left = '@-webkit-keyframes Left_'+id+' {' +
			'0% {' +
			'-webkit-transform: translateX(0);' +
			'}' +
			'100% {' +
			'-webkit-transform: translateX(-'+param+'px);' +
			'}' +
			'}'
		style.insertRule(Left, 0);
		p.style.WebkitAnimation = speed + "s Left_"+id+" linear infinite normal";
	}
}

使用：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<script src="js/TextAutoScroll.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 100px;
				border: 1px solid #ff6700;
			}
			
			.box2 {
				width: 200px;
				border: 1px solid #ff6700;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div>
				文字滚动的内容
			</div>
		</div>
		<div class="box">
			<div>
				文字滚动的内容文字滚动的内容文字滚动的内容
			</div>
		</div>
		<div class="box">
			<div>
				文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
				文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
			</div>
		</div>
		<div class="box2">
			<div>
				文字滚动的内容
			</div>
		</div>
		<div class="box2">
			<div>
				文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
				文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容
			</div>
		</div>
		<script>
			var textAutoScroll = new TextAutoScroll();
			textAutoScroll.startScroll(".box", textAutoScroll.ScrollTypeEnum.Left);
			
			var textAutoScroll = new TextAutoScroll();
			textAutoScroll.startScroll(".box2", textAutoScroll.ScrollTypeEnum.LeftRight);
		</script>
	</body>
</html>