<!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. django orm 基本Field介绍

    ORM:object relational mapping,对象关系映射 django中使用原生sql的弊端: 1.SQL语句重复率很高,利用率不高 2.如果业务逻辑生变,原生SQL更改起来比较多 3 ...

  2. 【bzoj2083】[Poi2010]Intelligence test STL-vector+二分查找

    题目描述 霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.Lyx很渴望成为霸中智力测试机构的主管,但是他在这个工作上做的并不好,俗话说熟能生巧,他打算做很多练习,所 ...

  3. THUSC2018 爆零记

    没想到我还真能过这个...... 太玄学了= = 不过这直接导致我月考数学挂科,掉出年级前十= = 5.26 THU过了! 真是十分意外的惊喜啊$-\omega-$ 6.1 今天出发去帝都! 然而飞行 ...

  4. jQuery基础 浅析（含基本方法和选择器）

    1.jQuery与DOM互相转换 jQuery入库函数:$(document).ready(function(){}) $(function(){}) $(“#btn”):jQuery存储的是DOM对 ...

  5. Eclipse SVN冲突详细解决方案

         大家一起开发,难免有时会同时修改同一个文件,这样就要学会解决冲突.当大家更新代码,发现以下情况的时候,就说明你的修改的文件和服务器的文件产生了冲突(一般是别人也改了同一个文件). 1)和服务 ...

  6. Bzoj 3145 - [Feyat cup 1.5]Str

    bzoj 3145 - [Feyat cup 1.5]Str Description 给你两个长度\(10^5\)级别的串\(S, T\) 求\(S,T\)的最长模糊匹配公共子串 模糊匹配 : 至多一 ...

  7. TextBox取不到值及其TextBox取不到js赋的值

    原文发布时间为:2009-10-22 -- 来源于本人的百度文章 [由搬家工具导入] 原因：使用了一个只读的TextBox控件 曾经遇到过这样的问题：使用了一个只读的TextBox控件，但是在后台代码 ...

  8. asp.net几种开源上传控件，flash,ajax版，支持多文件

    原文发布时间为:2010-03-18 -- 来源于本人的百度文章 [由搬家工具导入] １、AspnetUpload 地址：http://www.aspnetupload.net/ 最早接触的上传控件。 ...

  9. hdu 1403 Longest Common Substring 后缀数组 模板题

    题目链接 题意 问两个字符串的最长公共子串. 思路 加一个特殊字符然后拼接起来,求得后缀数组与\(height\)数组.扫描一遍即得答案,注意判断起始点是否分别在两个串内. Code #include ...

  10. EBImage - - 给图片增加字符

    EBImage中文文档 英文版出处:http://www.bioconductor.org/packages/release/bioc/vignettes/EBImage/inst/doc/EBIma ...