<span>JavaScript实现竖直文本滚动</span>

JavaScript实现竖直文本滚动

全栈程序员-站长 • 2021年11月24日上午6:00 • 未分类 • 阅读 39

一、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Scroll Text</title>
	<link rel="stylesheet" type="text/css" href="scrollText.css">

</head>
<body>
	<div class="news_root">
		<div class="news_header">HeaderLine</div>
		<div id="scrollContainer">
			<div id="scrollContent">
				<a href="#">w3c has released html5</a>
				<a href="#">w3c has released css3</a>
				<a href="#">w3c has released ecmasript5</a>
				<a href="#">w3c has released ria</a>
				<a href="#">w3c has released html5 bom</a>
				<a href="#">w3c has released ria</a>
				<a href="#">w3c has released html5 bom</a>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="scrollText.js"></script>
</body>
</html>

二、CSS代码

body
{
	font-size:15px;
	font-family: 'Microsoft YaHei','微软雅黑','SimSun','宋体';
	margin: 0px;
	padding: 0px;
	text-align: center;
}
a
{
	color:#666666;
	text-decoration: none;
	display: block;
	line-height: 1.5em;
}
a:hover
{
	color: #CC0000;
	text-decoration: none;
}
.news_root
{
	width: 255px;
	height: 134px;
	text-align: left;
	margin: 0 auto;
	border: 1px solid #ccc;
}
.news_header
{
	width: 243px;
	height: 16px;
	vertical-align: top;
	text-align: left;
	font-size: 14px;
	padding: 6px;
	background-color: #ccc;
}
#scrollContainer
{
	width: 245px;
	margin: 2px 5px;
	overflow: hidden;
	text-align: left;
}

三、Javascript代码

var stopscroll = false;
var scrollContHeight = 95;   //滚动区域的高度
var scrollContWidth = 230;   //滚动区域的宽度
var scrollSpeed = 25;        //滚动的速度，越小滚动越快

var scrollContainer = document.getElementById("scrollContainer");
var scrollContent = document.getElementById("scrollContent");
do
{
	scrollContainer.appendChild(scrollContent.cloneNode(true));
}while(scrollContainer.offsetHeight < scrollContHeight);

scrollContainer.style.width = scrollContWidth+"px";
scrollContainer.style.height = scrollContHeight+"px";
scrollContainer.noWrap = true;

//加入�事件：鼠标经过，停止滚动；鼠标离开，继续滚动
scrollContainer.onmouseover = new Function("stopscroll = true");
scrollContainer.onmouseout = new Function("stopscroll = false");

function init()
{
	scrollContainer.scrollTop = 0;
	setInterval(scrollUp,scrollSpeed);
}
init();

var currTop = 0;
function scrollUp()
{
	if(stopscroll == true)
		return;
	currTop = scrollContainer.scrollTop;
	scrollContainer.scrollTop += 1;
	if(currTop == scrollContainer.scrollTop)
	{
		scrollContainer.scrollTop = 0;
		scrollContainer.scrollTop += 1;
	}
}

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/119017.html原文链接：https://javaforall.net