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

标签：discuz   style   blog   http   io   color   ar   sp   数据   

第一次安装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来虚拟这种滚动效果。造成一种实时刷新状态信息的假象。

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

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

标签：discuz   style   blog   http   io   color   ar   sp   数据   

原文地址：http://www.cnblogs.com/afrog/p/4102629.html