JavaScript

超轻量级php框架startmvc

JS实现自定义状态栏动画文字效果示例

更新时间:2020-06-10 10:24:01 作者:startmvc
本文实例讲述了JS实现自定义状态栏动画文字效果。分享给大家供大家参考,具体如下:在I

本文实例讲述了JS实现自定义状态栏动画文字效果。分享给大家供大家参考,具体如下:

在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字。


<body onload="stack();">
 <script type="text/javascript">
 var statusText="自定义动画状态栏文字";
 var out="";
 var pause=100;
 var animateWidth=20;
 var position=animateWidth;
 var i=0;
 var stack=function(){
 if(statusText.charAt(i)!=" "){
 out="";
 for(var j=0;j<i;j++){
 out+=statusText.charAt(j);
 }
 for(j=i;j<position;j++){
 out+=" ";
 }
 out+=statusText.charAt(i);
 for(j=position;j<animateWidth;j++){
 out+=" ";
 } 
 window.status=out;
 if(position==i){
 animateWidth++;
 position=animateWidth;
 i++;
 }else{
 position--;
 }
 }else{
 }
 if(i<=statusText.length){
 setTimeout("stack()",pause);
 }
 }
 </script>
</body>

运行效果:

JS 自定义 状态栏 动画 文字 效果