首页 > 代码库 > JavaScript实现竖直文本滚动

JavaScript实现竖直文本滚动

2024-07-08 02:16:49   222人阅读

一、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=http://www.mamicode.com/"scrollText.css">>
二、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;
	}
}


联系
我们