一、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. php邮件发送 phpmailer

    首先要安装phpmailer开源项目. 将class.phpmailer.php转移到php文件夹下, 编写代码: <?php require("class.phpmailer.php ...

  2. 为tomcat启用nio机制

    tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或者启动日志.或者登录他们的默认页面http://localhost:8080/查看其中的服务器状态. ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据

    从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnecto ...

  4. SQLite Version3.3.6源代码文件结构

    Version 3.3.6源代码文件结构                                                ——整理:hustcat 2009-2-19 文件名称 大小by ...

  5. C 语言函数指针

    c代码: #include <stdio.h> int add(int x,int y); int subtract(int x,int y); int domath(int (*math ...

  6. IDM和ODM

    DM (Integrated Data Multiplexer):综合数据复用器[1]  综合数据复用器是一种数据复用设备,它可以将多路RS232.RS485及数字语音等多种数据复用到E1传输通道或光 ...

  7. windows下面虚拟主机

    1. wondows xp + apmserv 5.2.6 端口8088 2.httpd.config文件 1. ServerRoot  "D:/APMServ/APMServ5.2.6/A ...

  8. 求助：IIS中部署WCF，生成的WSDL中怎么把“计算机名”改成IP==找到一个解决办法

    环境:win2003 IIS6 VS2008 求助: 如图: 有朋友遇到过这个问题吗?还是说这个不是问题? 先 谢谢了! 补充配置文件: 代码 目前解决办法: 修改IIS的配置: 如图: 解决后的ws ...

  9. MFC UpdateData自动更新

    嗯,添加一个按钮和我们自己定义的成员变量 关联. 方法1. 在*.rc 或者class 类视图中点击[add variable],就会自动生成DDX_Text(*,*)的内容及其IF 方法2.  自己 ...

  10. [King.yue]Ext.NET相比WebForm的优势

    1)更好的用户体验.(生产力++) 虽然WebForm可以使用微软的Ajax以及Ajax控件进行开发,但是用户体验还是远远不及extjs.而且你可以跟客户忽悠,这个功能多么滴难做,多么好,但是我们做出 ...