一、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. CHANGE DEFAULT FTP PORT FOR VSFTP

    http://twincreations.co.uk/change-default-ftp-port-for-vsftp/ http://www.cnblogs.com/kuliuheng/p/320 ...

  2. Eclipse导入git上的maven web项目 部署

    1 Eclipse中导入Git的maven项目 方法1: (1)首先当然是拉代码. 在Eclipse里面有个Git Repositories Exploring.就是Git仓库,clone a git ...

  3. .htaccess文件的详解以及404页面的设置

    打开记事本,写入以下代码: ErrorDocument 404 /404.html保存成.htaccess文件上传到网站的根目录. /404.html是目录名和文件名,可以改成自己的名字.QUOTE: ...

  4. Android 自定义seekbar中，thumb被覆盖掉一部分问题

    (图一)  (图二)    (图三) 做一个自定义的seekbar,更改其背景图片: <com.android.Progress android:id="@+id/focus_seek ...

  5. 在Hadoop伪分布式模式下安装Hbase

    安装环境:Hadoop 1.2.0, Java 1.7.0_21 1.下载/解压 在hbase官网上选择自己要下的hbase版本,我选择的是hbase-0.94.8. 下载后解压到/usr/local ...

  6. Ember.js demo2

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1 ...

  7. APP-PER-50022: Oracle Human Resources could not retrieve a value for the User Type profile option.

    Symptoms ----------------------- AP > Setup > Organizations Show Error tips: APP-PER-50022: Or ...

  8. hdu4655Cut Pieces

    http://acm.hdu.edu.cn/showproblem.php?pid=4655 先以最大的来算为 N*所有的排列数  再减掉重复的 重复的计算方法:取相邻的两个数的最小值再与它前面的组合 ...

  9. WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案

    首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼 ...

  10. $resource

    属性/URL映射 AngularJS Resource:与 RESTful API 交互 自定义$resource方法 <!DOCTYPE html> <html ng-app=&q ...