编程练习–模拟安装程序时的信息滚屏效果


第一次安装Discuz时,有一个数据库的安装过程,看到会自动滚屏显示的信息,感觉非常好奇,由于当时主要从事后端程序的开发,对前端这些神奇的效果,也只能是欣赏一下子。

现在突然想到要自己来实现这个效果,作为今天的编程练习,实属对当时那个效果的怀念。

先上一个朴素无奇的静态效果图:

编程练习--模拟安装程序时的信息滚屏效果

点这里查看动态的在线演示效果:http://sandbox.runjs.cn/show/jvl11v0d

核心代码:

function install(){
         if(message.length>0){
             var text = message.shift()+'<br>';
             box.innerHTML += text;
             box.scrollTop += 50;
             var t = setTimeout(function(){
                 clearTimeout(t);
                 install();
             },100)
         }else{
             box.innerHTML += 'done !!';
         }
     }

主要用的到的技巧有两个:

1: 利用外框比内框小,遮住内框产生的滚动条。

2: 每隔一小段时间去更新一下滚动条的位置。

由于这里只是简单的模拟这种效果,如果是真实的项目,数据部分可以通过ajax实时返回. 同时install函数也需要做一些调整。比如,由于ajax 本身就是异步的,所以真实的情况不需要用setTimeout来模拟了。当然,有时候我们的后端程序是一次性返回的。那时,就可以直接套用这个install来虚拟这种滚动效果。造成一种实时刷新状态信息的假象。

如果大家更好的思路,欢迎留言。如果对你有启发,请推荐一下。谢谢!


发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>