提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js控制文字不间断向上滚动demo效果示例

JS控制 示例 效果 文字 Demo 滚动 向上
2023-09-14 09:13:42 时间 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>不间断向上滚动</title>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
		</style>
	</head>
	<body>
		<div id="xst" style="width:290px;height:170px;">
			    <p>
				测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试111
			</p>
		</div>
		<script>
			function addEventSimple(obj, evt, fn) {
				if (obj.addEventListener) {
					obj.addEventListener(evt, fn, false);
				} else if (obj.attachEvent) {
					obj.attachEvent('on' + evt, fn);
				}
			}
			addEventSimple(window, 'load', initScrolling);
			var scrollingBox;
			var scrollingInterval;
			var reachedBottom = false;
			var bottom;


			function initScrolling() {
				scrollingBox = document.getElementById('xst');
				scrollingBox.style.overflow = "hidden";
				scrollingInterval = setInterval("scrolling()", 50);
				scrollingBox.onmouseover = over;
				scrollingBox.onmouseout = out;
			}

			function scrolling() {
				var origin = scrollingBox.scrollTop++;
				if (origin == scrollingBox.scrollTop) {
					if (!reachedBottom) {
						scrollingBox.innerHTML += scrollingBox.innerHTML;
						reachedBottom = true;
						bottom = origin;
					} else {
						scrollingBox.scrollTop = bottom;
					}
				}
			}

			function over() {
				clearInterval(scrollingInterval);
			}

			function out() {
				scrollingInterval = setInterval("scrolling()", 50);
			}
		</script>

	</body>

</html>

相关文章