<!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. Android数据储存之SharedPreferences

    Android中SharedPreferences通常与Editor连用 接口SharedPreferences常用方法: boolean contains(String str):判断SharedP ...

  2. web项目中各种路径的获取(复制,为以后好找资源)

    web项目中各种路径的获取 1.可以在servlet的init方法里 String path = getServletContext().getRealPath("/"); 这将获 ...

  3. Centos定时自动执行脚本

    检查本机crond的基本情况 1.crond的运行状况 2.crond是否开机自启动 如何将脚本添加进自动运行的时间内 直接编辑 vim /etc/crontab ,默认的文件形式如后面的图:   我 ...

  4. layer 体验

    做后端的,前端一直不擅长,提示语以前也只会alert,非常难看,后来在别人代码看到lay.msg() https://pan.baidu.com/s/1eRHH59g <!DOCTYPE htm ...

  5. 游戏(bzoj 1854)

    Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性 ...

  6. 基于Socket创建Web服务

    基于Socket创建Web服务 为什么要使用Socket呢,我们来看下图

  7. 使用python将ppm格式转换成jpg【转】

    转自:http://blog.csdn.net/hitbeauty/article/details/48465017 最近有个很火的文章,叫 有没有一段代码,让你觉得人类的智慧也可以璀璨无比? 自己试 ...

  8. [SaltStack] Salt高可用和负载均衡部署

    Saltstack HA部署 Salt官网是有HA/Rebalance/failover解决方案的, 但版本必须是2014.7, 目前该版本还没有release, 从官网下载的源码包安装使用测试起来一 ...

  9. UnionFind（PYthon实现）

    UnionFind用于解决图的连通性问题,不需要给出具体路径的情况,可用来计算连通分支数 参考链接: https://blog.csdn.net/dm_vincent/article/details/ ...

  10. hdu3452 无向树去掉最小的边集使任何叶子与根不连通 / 最小割

    思路一下就上来了,叶子向汇点连边,inf保证不会成为割,跑根到汇点最小割即可.注意无向树双向建边.基础题,分分钟1A: #include<iostream> #include<que ...