当文本内容过长使用动画显示(jquery)

最新推荐文章于 2024-04-26 16:47:03 发布

再※见了＆单纯，！

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量256

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_44732752/article/details/127731418

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquerySty.js"></script>//引入jquery文件
		<style>
			.titleSpan {
				width: 800px;
				background-color: pink;
				overflow: hidden;
				white-space: nowrap;
				display: inline-block;
			}
			.yieldDataTopText {
			    font-size: 26px;
			    color: black;
			}
		</style>
	</head>

	<body>
			<div style="display: flex;">
				<span>产 品:</span>
				<div class="titleSpan">
					<span class="yieldDataTopText" id="titleSpan">1111111111111111111111111111111111111tttttttttttttttttttttttttttttttttttttt</span>
				</div>
			</div>
		<script type="text/javascript">
			$(function() {
				var initWidth = parseInt($("#titleSpan").css('margin-left'));
				var stopWidth = -Number($("#titleSpan").width());
				var width = parseInt($("#titleSpan").css('margin-left'));
				console.log('width', Number($("#titleSpan").width()))
				console.log('initWidth', initWidth);
				console.log('stopWidth', stopWidth);
				console.log('width', width);
				if (Number($("#titleSpan").width()) > 800) {
					setInterval(function() {
						if (width == parseInt(stopWidth)) {
							width = initWidth;
						}
						width = width - 1;
						$("#titleSpan").css("margin-left", width)
					}, 10);
				}
			})
		</script>


		


	</body>

</html>