<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		#div1{ width:200px; min-height:20px; border:1px #000 solid;}

	</style>

	<script type="text/javascript">

		window.onload = function(){

			var aInput = document.getElementsByTagName("input");

			var oDiv = document.getElementById("div1");

			var str = '曾经是打工妹，如今她是上市公司的CEO；她曾经被逼婚，如今蜕变为网络第一红娘；她在成就更多人幸福的同时，也成就了自己的事业。她就是"小龙女"，世纪佳缘CEO龚海燕';

			var timer = null;

			var arr = str.split("");

			aInput[0].onclick = function(){

				clearInterval(timer);

				timer = setInterval(function (){

					var val = arr.shift();

					oDiv.innerHTML += val;

					if(arr.length == 0 ){

						clearInterval(timer);

					}

				},50);

			}

			aInput[1].onclick = function(){

				clearInterval(timer);

				var arr2 = oDiv.innerHTML.split("");

				timer = setInterval(function(){

					arr.unshift(arr2.pop());

					oDiv.innerHTML = arr2.join("");

					if(arr2.length == 0 ){

						clearInterval(timer);

					}

				},50)

			}

			aInput[1].onclick = function(){

				var arr2 = oDiv.innerHTML.split("");

				clearInterval(timer);

				timer = setInterval(function(){

					arr.unshift(arr2.pop());

					oDiv.innerHTML = arr2.join("");

					if(arr2.length == 0){

						clearInterval(timer);

					}

				},50)

			}

		}

	</script>

</head>

<body>

	<input type="button" value="展开" ><input type="button" value="收缩">

	<div id="div1"></div>

</body>

</html>

　　

<script type="text/javascript">

		window.onload = function(){

			var aInput = document.getElementsByTagName("input");

			var oDiv = document.getElementById("div1");

			var str = '曾经是打工妹，如今她是上市公司的CEO；她曾经被逼婚，如今蜕变为网络第一红娘；她在成就更多人幸福的同时，也成就了自己的事业。她就是"小龙女"，世纪佳缘CEO龚海燕';

			var timer = null;

			var iNow = 0;

			aInput[0].onclick = function(){

				clearInterval(timer);

				timer = setInterval(function (){

					var val = str.substring(0,++iNow);

					oDiv.innerHTML = val;

					if(val == str){

						clearInterval(timer);

					}

				},50);

			}

			aInput[1].onclick = function(){

				clearInterval(timer);

				timer = setInterval(function(){

					var val = str.substring( 0 , iNow-- )

					oDiv.innerHTML = val;

					if(val == "" ){

						clearInterval(timer);

					}

				},50)

			}

		}

	</script>

　　

js 展开&收缩 二种的更多相关文章

  1. 原生态js展开收缩

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

  2. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  3. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  4. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  5. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  6. 修改mui accordion（折叠面板）默认展开收缩行为

    mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

  7. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  9. jquery展开收缩列表

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. MySql数据库 - 3.利用MySql Workbench 对数据库进行操作

    打开MySql Workbench 选择呢一个数据库 查看数据库: 创建数据库 在SCHEMAS下的空白位置右键 - 选择 Create Schema... 如果数据库名字中有大写字母,会出现如下提示 ...

  2. AngularJs MVC 详解

    为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...

  3. POJ 1990：MooFest（树状数组）

    题目大意:有n头牛,第i头牛声调为v[i],坐标为x[i],任意两值牛i,j沟通所需的花费为abs(x[i]-x[j])*max(v[i],v[j]),求所有牛两两沟通的花费. 分析: 我们将奶牛按声 ...

  4. 删除ARCSDE表空间和用户后，新建时出现error -1：O的解决办法

    对于刚开始使用arcsde的用户,可能会出现各种问题,慢慢来就会找到解决办法 当我们删除用户和表空间时,在服务器本地还保留这sde.dbf文件(删除时选择了删除本地文件,不知道为什么), 我们可以换一 ...

  5. 购物(sum)

    购物(sum) 题目描述 visit_world 有一个商店,商店里卖N个商品,第ii 个的价格为 a[[i] 我们称一个正整数K 是美妙的,当且仅当我们可以在商店里选购若干个商品,使得价格之和落在区 ...

  6. 洛谷P1908 逆序对

    P1908 逆序对 2.2K通过 4.4K提交 题目提供者该用户不存在 标签云端 难度普及/提高- 时空限制1s / 128MB 提交  讨论  题解 最新讨论更多讨论 归并排序党注意了!数组要开… ...

  7. Chrome 浏览器访问 Google 学术出现问题 “but your computer or network may be sending automated queries. ”

    问题: Chrome 浏览器访问 Google 学术出现如下的问题 : ... but your computer or network may be sending automated querie ...

  8. 【05】js异步编程理解

    1.概念 同步:一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的.同步的.异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务, ...

  9. rsync Linux系统下的数据镜像备份工具

    rsync是Linux系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync支持大多数的类Unix系统,无论是Linux.Solaris还是BSD上都经过了良好的 ...

  10. [LeetCode] Linked List Cycle II 链表环起始位置

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Foll ...