<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>滚动显示</title>

<style type="text/css">
.box {
	width: 150px;
	height: 100px;
	line-height: 25px;
	border: #bbb 1px solid;
	overflow: hidden;
}

.box ul {
	margin: 0;
	padding: 0
}

.box li {
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	text-align: center;
	list-style-type: none;
}
</style>
</head>

<body>
	<div class="box" id="marqueebox0">
		<ul>
			<li style="background: #f8e2ac;">第一行</li>
			<li style="background: #f5f5f5;">第二行</li>
			<li style="background: #ffe6ec;">第三行</li>
			<li style="background: #33ddff;">第四行</li>
		</ul>
	</div>

	<script type="text/javascript">

		/* 滚动效果
		函数startmarquee的参数：
		lh：文字一次向上滚动的距离或高度； (样式高度也要修改)（可配置样式高度和这里一样来显示一次滚动几条）
		speed：滚动速度；
		delay：滚动停顿的时间间隔；
		index：可以使封装后的函数应用于页面当中不同的元素；
		 */
		function startmarquee(lh, speed, delay, index) {

			var t;
			var p = false; //p是true还是false直接影响到下面start()函数的执行

			//获取文档中的滚动区域对象 (DIV)
			var o = document.getElementById("marqueebox" + index);
			o.innerHTML += o.innerHTML; //对象中的实际内容被复制了一份，复制的目的在于给文字不间断向上滚动提供过渡。 

			//鼠标滑过，停止滚动；
			o.onmouseover = function() { p = true; }

			//鼠标离开，开始滚动；
			o.onmouseout = function() { p = false; }

			//文字内容顶端与滚动区域顶端的距离，初始值为0；
			o.scrollTop = 0;

			function start() {

				t = setInterval(scrolling, speed); //每隔一段时间，setInterval便会执行一次 

				//滚动停止或开始，取决于p传来的布尔值；
				if (!p) {
					o.scrollTop += 1;
				}
			}

			function scrolling() {

				//如果不被整除，即一次上移的高度达不到lh，则内容会继续往上滚动；
				if (o.scrollTop % lh != 0) {
					o.scrollTop += 1;
					//对象o中的内容之前被复制了一次，所以它的滚动高度，其实是原来内容的两倍高度；
					//当内容向上滚动到scrollHeight/2的高度时，全部3行文字已经显示了一遍，至此整块内容
					//scrollTop归0；再等待下一轮的滚动，从而达到文字不间断向上滚动的效果；
					if (o.scrollTop >= o.scrollHeight / 2)
						o.scrollTop = 0;
				} else {
					//否则清除t，暂停滚动
					clearInterval(t);
					//经过delay间隔后，启动start() 再连续滚动
					setTimeout(start, delay);
				}
			}

			//第一次启动滚动；setTimeout会在一定的时间后执行函数start()，且只执行一次
			setTimeout(start, delay);
		}

		//带停顿效果
		startmarquee(100, 0, 300, 0);
		//不间断连续
		//startmarquee(25,40,0,1); 

	</script>

</body>
</html>

JS滚动显示的更多相关文章

  1. js滚动显示: 滚动条置顶/底

    <script> //当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下面的内容 document.getElementByIdx ( 'chatboard').scrollTop ...

  2. scrollReveal.js – 页面滚动显示动画JS

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的  JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是  WOW.js  的动画只播放一次,而 ...

  3. Jquery控制滚动显示欢迎字幕v2

    Jquery控制滚动显示欢迎字幕v2: 之前做的那个比较适合测试环境,但要套入到网站中,有两个按钮在那摆着,还是不太好看.后面对代码进行了修改,如下: 参考代码: <html> <h ...

  4. Jquery实现滚动显示欢迎字幕效果

    Jquery控制滚动显示欢迎字幕: 参考代码: <!DOCTYPE html> <html> <head> <title>Colin Marquee W ...

  5. jquery 上下滚动显示隐藏

      function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; win ...

  6. js倒计时显示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  7. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  8. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. ListView的自动循环滚动显示

    最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...

随机推荐

  1. SpringBoot跨域问题解决方案

    一.允许全部请求跨域许可的代码: 需要继承WebMvcConfigurerAdapter类 @Configuration public class MyWebAppConfigurer extends ...

  2. Elasticsearch 创建、更新、删除文档、处理冲突

    ----创建新文档---- 1._index,_type和_id的组合可以唯一标识一个文档,所以确保一个新文档的最简单的办法就是,使用索引请求的POST形式让elsticsearch自动生成唯一_id ...

  3. c语言程序第2次作业

    (一)改错题 1.输出带框文字:在屏幕上输出以下3行信息. 错误信息1:{{uploading-image-560144.png(uploading...)} 错误原因:stdio误写为stido 错 ...

  4. vue移动端组件库vux使用小记

    1.首先安装vux:npm install  vux 2.安装vux-loader:npm install  vux-loader 3.确认是否已安装less-loader:npm  install ...

  5. c#下winform的ftp上传

    /* FTPFactory.cs Better view with tab space=4 Written by Jaimon Mathew (jaimonmathew@rediffmail.com) ...

  6. Minimize the error CodeForces - 960B

    You are given two arrays A and B, each of size n. The error, E, between these two arrays is defined  ...

  7. PHP 实例 AJAX RSS 阅读器

    RSS 是一种描述和同步网站内容的格式,是目前使用最广泛的XML应用. RSS 搭建了信息迅速传播的一个技术平台,使得每个人都成为潜在的信息提供者. RSS 阅读器用于阅读 RSS Feed. AJA ...

  8. mongo 读分析

    分布式读 读冲突 分布式中数据库有多份数据,各份数据可能存在不一致性. mongo 只会写到primary节点上,理论上来说不会有文档冲突,也就是说数据库中的数据都以primary节点为标准. 但是有 ...

  9. 建立自己的git服务器

    需求情景 就像金山快盘同步盘那样, 在开发环境windows 10和部署环境Ubuntu server 14.04之间建立同步关系.比如windows端多了一个a.txt文件,你推送后,Ubuntu端 ...

  10. Eclipse调试（1）——基础篇

    作为使用Eclipse的程序员都会使用它的Debug.但是有不少人只会用F6.F8,其他功能知之甚少.今天我就来总结一下我在使用eclipse的debug时的一些个人经验.水平有限,不足之处还请赐教. ...