一、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. easyui源码翻译1.32--EasyLoader（简单加载）

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3. ...

  2. Altium自定义的快捷键设置

    我想要在AD09里面设置自定义的快捷键,例如将布线设置成键盘上的字母E键,如何设置求大神指点!感激不尽!!! 为什么快捷键都要发一篇文章呢?主要是AD换层的快捷键是*号,与其他快捷键离的很远,一个AD ...

  3. 匿名函数和Lambda表达式

    这个题目有点牵强,真不知道如何取一个比较中意的名称,写技术博客,我很少拘泥小节,但是注重细节,如果细节都出现问题了,那么这个博文也就失去了价值. 其实应该从委托说起,委托是C#中的一个重要的内容,记得 ...

  4. 【转】HTML中A标签与click事件的前世今生

    在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页.在这种情况下,通常有以下三种处理方式: 不设置<a>标签的href属性,只设置onclick属性.在这种处理方式下,通 ...

  5. Cocos2d-x CCEditBox & CCTextFieldTTF

    下面简单记录一下如何Cocos2d-x中创建输入编辑框.在引擎中为我们提供了这样两个类:CCEditBox  和  CCTextFieldTTF. 一.CCEditBox ①这个类文件的位置 ②这个类 ...

  6. 手势识别官方教程(8)拦截触摸事件，得到触摸的属性如速度，距离等，控制view展开

    onInterceptTouchEvent可在onTouchEvent()前拦截触摸事件, ViewConfiguration得到触摸的属性如速度,距离等, TouchDelegate控制view展开 ...

  7. 白书P61 - 点集配对问题

    白书P61 - 点集配对问题 状压DP #include <iostream> #include <cstdio> #include <cstring> using ...

  8. matlab添加M_map工具箱（转 http://blog.sina.com.cn/s/blog_491b86bf0100srt9.html）

    之前转载过matlab画世界地图的博文.最近正好用到.首先试了matlab自带的worldmap,感觉画出来的图形不尽如人意,比较杂乱.如下图. 略查阅了些资料,请教了Liangjing,一致推荐m_ ...

  9. 一步步写STM32 OS【二】环境搭建

    一.安装IAR for ARM6.5 二.新建工程 1.选择处理器:STM32F407VG,暂不使用FPU 2.必要的路径配置和宏定义 3.使用SWO重定向IO输出 4.使用ST-LINK仿真器 5. ...

  10. Cocos2d-x ios 下http请求的另一种实现

    简单描述下需求:游戏要加入事件log,比如玩家升到10级:创建角色:或是,触发这些事件后要求客户端忘后台抛送一条log信息.一般情况下,我们可以直接使用cocos自带的HttpClient(底层用li ...