JavaScript实现竖直文本滚动

时间：2023-03-09 21:37:22
JavaScript实现竖直文本滚动

一、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;

	}

}

相关文章