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)


相关推荐

  • IntelliJ IDEA Community_集成灶好不好用过的来说一下

    IntelliJ IDEA Community_集成灶好不好用过的来说一下https://blog.csdn.net/u013412790/article/details/71022784 第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!去电脑管理的软件管理里面可以直接下载,方便迅速下载之后直接安装就好了,但是要注意这里的这个文件也要安装上,默认是不安装的,如果不安装,svn中的bin目录下就会没有svn.exe,这个待会会用到,所以一点要注意哦。(都是…

  • linux默认安装路径在哪里_linux进入根目录命令

    linux默认安装路径在哪里_linux进入根目录命令Nginx安装安装路径 /usr/local/nginx配置文件 /usr/local/nginx/conf/nginx.conf启动:进入到/usr/local/nginx/sbin下,./nginx关闭:进入到/usr/local/nginx/sbin下 ./nginx -s stop 重启:同上, -s reload停止 kill -9 线程号查看 ps -ef|grep nginxhttps://www.jianshu.com/p/9f2c162ac77c 可参考安装ng

  • ROC曲线的概念和意义[通俗易懂]

    ROC曲线的概念和意义[通俗易懂]ROC曲线受试者工作特征曲线(receiveroperatingcharacteristiccurve,简称ROC曲线),又称为感受性曲线(sensitivitycurve)。得此名的原因在于曲线上各点反映着相同的感受性,它们都是对同一信号刺激的反应,只不过是在几种不同的判定标准下所得的结果而已。接受者操作特性曲线就是以假阳性概率(Falsepositiverate)为…

  • Eric6安装问题

    最近开始学习python,一开始用的开发环境是IDLE,这个开发环境适合新手,安装比较简单,对初学者来说也够使用。但是最近又发现了一个开发环境Eric6,使用起来更加方便,但是安装比较麻烦。下面说说安装步骤:安装环境:win764位python2.7网址:https://www.python.org/PyQt4网址:https://riverbankcomputing.co

  • 抽象工厂模式与工厂方法模式有哪些不同_抽象工厂模式java代码

    抽象工厂模式与工厂方法模式有哪些不同_抽象工厂模式java代码Abstract Factory动机实例模式定义结构要点总结笔记动机在软件系统中,经常面临着”一系列相互依赖的对象“的创建工作;同时,由于需求的变化,往往存在更多系列对象的创建工作如果应对这种变换?如何绕过常规的对象创建方法(new),提供一种”封装机制“来避免客户程序和这种”多系列具体对象创建工作“的紧耦合?实例数据库连接的时候会有很多关联的对象,这些对象是一个整体朴素class EmployeeDAO{public: vector<EmployeeDAO> GetEm

  • Pycharm专业版以及通过高校邮箱激活「建议收藏」

    Pycharm专业版以及通过高校邮箱激活「建议收藏」Pycharm专业版下载官网:https://www.jetbrains.com/官网下载速度也很快,如果实在下不下来可以找找百度云资源。这里我使用的2019版本,因为在使用2020最新版本安装的时候出现问题-在用高校邮箱激活时弹出报错框,大致的内容就是让你修改host文件什么的。因此为了不必要的麻烦,可以使用和我一样的版本2019.1.4下载完成之后,点击exe文件进行安装,具体安装步骤不再说了(网上教程很多),之后进行环境变量的配置(见其他教程)。高校邮箱激活安装之后进行高校邮箱的认证。这

发表回复

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

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