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

	}

}

JavaScript实现竖直文本滚动的更多相关文章

  1. 设置UIScrollView只可以水平或者竖直滚动

    UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...

  2. 仿腾讯QQ竖直滑动导航菜单

    菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...

  3. css控制竖直文字显示

    假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...

  4. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  5. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  6. writing-mode，文字竖直书写，字符之间距离，单词之间距离

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. PyQt学习随笔：QTableWidget水平表头horizontalHeader、竖直表头verticalHeader的相关操作方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTableWidget表格部件的表头包括水平表头和竖直表头,水平表头每节对应表格的一列,竖直表头对 ...

  8. vue文本滚动组件

    看了好多网上的文本组件,发现好多都有这样那样的问题:特别是滚动的时候失真的感觉,今天整合了文本滚动的方式用CSS的 animation写出一套组件:VUE项目直接用.感觉有用的朋友关注下   效果图, ...

  9. [LeetCode] Binary Tree Vertical Order Traversal 二叉树的竖直遍历

    Given a binary tree, return the vertical order traversal of its nodes' values. (ie, from top to bott ...

随机推荐

  1. HDU4521+线段树+dp

    题意:在一个序列中找出最长的某个序列.找出的序列满足题中的条件. 关键:对于 第 i 个位置上的数,要知道与之相隔至少d的位置上的数的大小.可以利用线段树进行统计,查询.更新的时候利用dp的思想. / ...

  2. 【Linux安全】文件或目录权限设置

    实例演示: 要求:新建文件夹,名称为secure,要求改文件夹只能被创建者deadmin以及与deadmin同组用户进行读.写.执行的权限, 其他用户均只有读的权限. 查看 一下secure原本的权限 ...

  3. IPSEC实现

    IPSEC介绍与实现 一.介绍 IPSec 协议不是一个单独的协议,它给出了应用于IP层上网络数据安全的一整套体系结构,包括网络认证协议 Authentication Header(AH).封装安全载 ...

  4. Dom4j的使用(全而好的文章)

        版权声明: 本文由冰云完成,首发于CSDN,未经许可,不得使用于任何商业用途. 文中代码部分引用自DOM4J文档. 欢迎转载,但请保持文章及版权声明完整. 如需联络请发邮件:icecloud( ...

  5. BZOJ_1011_[HNOI2008]_遥远的行星_(近似)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1011 \(n\)个行星,第\(i\)颗行星的质量为\(m_i\),给出一个很小的常数\(A\) ...

  6. openlayer调用geoserver发布的地图实现地图的基本功能

    转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度 ...

  7. Asm Shader Reference --- Shader Model 3.0 part

    ps部分 概览   Instruction Set                                       Name Description Instruction slots S ...

  8. 开发工具安装运行bug总结

    如果tomcat出现闪退 在startup.bat--编辑   在文件最后加上 pause  ,再跑一次,可以看到闪退的原因. 一般是环境变量问题,只需要打开starup.bat--编辑,最方件的最上 ...

  9. 【JS】Intermediate2:Events and Callbacks

    event-driven :waiting for and reacting to events 2.page loads, user interacts (clicks, hovers, chang ...

  10. getchar

    getchar函数每次只从缓冲区中接受一个字符. getchar有一个int型的返回值. 当程序调用getchar时,程序就等着用户按键,用户输入的字符被存放在键盘缓冲区中,直到用户按回车为止(回车字 ...