js 展开&收缩 二种
2015-04-19 18:23
162 查看
<!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下拉列表动态收缩与展开
- jQuery弹性展开收缩菜单插件gooey.js
- JS右下角广告窗口代码(可收缩、展开及关闭)
- html div展开收缩 js 代码
- div+css+js实现菜单的收缩与展开
- JS右下角广告窗口代码(可收缩、展开及关闭)
- JS+CSS实现DIV层的展开、收缩效果
- js 通过单选框 展开和收缩 下拉框
- Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
- Javascript (JS) TreeView 收缩展开
- js实现div层缓慢收缩与展开的方法
- JS实现固定在右下角可展开收缩DIV层的方法
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- JS收缩展开效果
- Cell展开&&收缩全垒打
- js实现菜单的收缩与展开
- js的复选框的全选、反选、展开、收缩
- js实现的侧边栏展开收缩效果
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)