JS+CSS实现左右文字滚动

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字滚动:公众号AlbertYang</title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				font: 12px/1 '微软雅黑';
				background: #fff;
			}

			.main {
				width: 600px;
				padding: 10px;
				margin: 0 auto;
			}

			.wrap {
				padding-top: 10px;
				overflow: hidden;
				width: 150px;
				cursor: pointer;
			}

			.scroll {
				width: 1200px;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="wrap">
				<div class="scroll">
					<span>请您耐心等待~</span>
				</div>
			</div>

			<div class="wrap">
				<div class="scroll">
					<span>由于大促期间订单量激增,您的订单送达时效可能出现延迟,请放到GV房供热供热上档次的身份为您耐心等待~</span>
				</div>
			</div>

			<div class="wrap">
				<div class="scroll">
					<span>由于 发布</span>
				</div>
			</div>
		</div>
		<script>
			function audioTitleScroll() {
				console.log(22222);
				var audio_title = $(".wrap");
				audio_title.each(function() {
					titleScroll(this);
				});

				function titleScroll(wrap) {
					var div = wrap.getElementsByTagName('div')[0];
					var span = div.getElementsByTagName('span')[0];
					var span_w = 1000;
					if (span) {
						span_w = span.offsetWidth;
					}
					var div_w = wrap.offsetWidth;
					if (div_w > span_w || div.getElementsByTagName('span').length >= 2) {
						console.log(777);
						return false;
					}
					console.log(666);
					div.innerHTML += div.innerHTML;
					var timer = setInterval(goLeft, 20);
					$(wrap).hover(function() {
						clearInterval(timer);
					}, function() {
						timer = setInterval(goLeft, 20);
					});

					function goLeft() {
						if (span_w <= wrap.scrollLeft) {
							wrap.scrollLeft -= span_w;
						} else {
							wrap.scrollLeft++;
						}
					}
				}
			};
			$(function() {
				audioTitleScroll();
			})
		</script>
	</body>
</html>

 

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页