文字移动（从左往右）

Posted 2021-07-25 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字移动（从左往右）相关的知识，希望对你有一定的参考价值。

1、html 部分

<div id="app">
	<div class="move_box">
		<div class="move">
			<div class="move_item gradient_color" v-text="text" :style="{transform: `translateX(-${moveVal}px)`}"></div>
		</div>
	</div>
</div>

2、javascript 部分

1. 导入 vue：<script src="/node_modules/vue/dist/vue.js"></script>
2. 导入 axios：<script src="/node_modules/axios/dist/axios.min.js"></script>
3. 数据是通过 axios 请求 json 文件获取

new Vue({
	el: "#app",
	data: {
		moveData: [],
		text: '',
		moveVal: 0,
		fontSize: 26,
		widths: 0,
		count: 0
	},

	mounted() {
		this.getData();
	},

	methods: {
		// 获取数据
		getData() {
			let that = this;
			axios.get('../json/dataJson.json').then(({ data: { textMove } }) => {
				let newData = [];
				// 因为获取到的数据与想要的数据结构不同
				// 所以需要处理
				textMove.forEach(item => {
					let str = "";
					item.content.forEach(items => {
						str += items;
					});
					newData.push(str);
				});

				that.moveData = newData;
				that.translateX();
			})
		},

		translateX() {
			// 此函数的属性顺序不能修改
			let that = this,
				fontSize = that.fontSize,
				count = that.count,
				moveData = that.moveData;

			// 通过下标给显示内容的字段赋值
			that.text = moveData[that.count];
			// 计算下次获取的数据下标
			// 通过数组长度计算重置数组下标
			that.count = count > moveData.length - 2 ? 0 : count += 1;
			// 通过文字大小和文字长度计算盒子宽度
			that.widths = fontSize * that.text.length;

			let interval = setInterval(() => {
				// 向左移动的距离
				that.moveVal += 1;
				// 56 的作用
				// 1、确保向左移动的距离能完全隐藏文字
				// 2、达到时间间隔作用
				if (that.moveVal >= that.widths + 56) {
					// 重置定位值为 0
					that.moveVal = 0;
					// 清除定时器
					clearInterval(interval);
					// 重置 text 的值
					// 如果不重置会出现闪现效果
					that.text = '';
					// 递归调用
					that.translateX();
				}
			}, 20);
		}
	}
});

3、css 部分

.move_box {
	width: 370px;
	background-color: #888888;
	border-radius: 7px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
        
.move {
	width: 90%;
	position: relative;
	overflow: hidden;
	height: 50px;
	line-height: 50px;
	background-color: #666666;
}
        
.move_item {
	position: absolute;
	white-space: nowrap;
	font-size: 26px;
}
        
.gradient_color {
	background-image: -webkit-linear-gradient(bottom, #FFFFFF, #FFB90F);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}