JavaScript实现竖直文本滚动

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;
	}
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119017.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • sql2005数据库置疑的解决方法_sql数据库置疑修复工具

    sql2005数据库置疑的解决方法_sql数据库置疑修复工具数据库被置疑后的解决方法(一)A.我们使用默认方式建立一个供恢复使用的数据库(如test)。可以在SQLServerEnterpriseManager 里面建立。B.停掉数据库服务器。C.将刚才生成的数据库的日志文件test_log.ldf删除,用要恢复的数据库mdf文件覆盖刚才生成的数据 库数据文件test_data.mdf。D.启动数据库服务器。此时会看

  • assertthat和assertequals的区别_assertEquals

    assertthat和assertequals的区别_assertEqualsASSERT_VALID()与ASSERT()异同ASSERT()是MFC库中的断言,用法是ASSERT(布尔表达式).ASSERT宏用于确保参数内的表达式正确,如果表达式为false,则会显示一个消息对话框,其中有源文件的名字和当前行号,用户可以

  • ARM基础了解_arm编程架构

    ARM基础了解_arm编程架构ARM处理器家族早起经典处理器包括ARM7、ARM9、ARM11等,Cortex-A系列是它们的升级版从ARM11之后就变成了Cortex系列Cortex-M系列控制为单片机驱动的系统提供的低成本优化方案,应用于传统的微控制器市场,智能传感器,汽车周边部件等。Cortex-A系列处理针对开放式操作系统的高性能处理器,可以跑Android、Linux等系统,应用于智能手…

  • Okhttp学习及封装

    Okhttp学习及封装Okhttp1.学习Okhttp2.OkHttp的封装1.学习Okhttp需要导入依赖implementation’com.squareup.okhttp3:okhttp:3.12.1’四个按钮需要写入布局get请求,post请求,下载文件,上传文件别忘了加入SD卡权限,网络权限privatevoidinitView(){get=(Button)…

    2022年10月18日
  • Android的TCP Socket连接组件

    Android的TCP Socket连接组件

  • Java和C语言有什么区别?[通俗易懂]

    Java和C语言有什么区别?[通俗易懂]Java和C语言作为现在行业中经常被人提起的两种语言,有很大的区别。选择不同的语言学习以后的发展也会大不相同,那么Java和C语言有什么区别呢?现在学哪种语言更合适呢?从概念上看,C语言是一门面向过程、抽象化的通用程序设计语言;Java是一门面向对象编程语言,而Java语言是从C语言衍生而来,它吸收了C++语言的各种优点,并且摒弃了C++里难以理解的多继承、指针等概念。从概念可以看出C语言相当…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号