请问这段代码如何处理，让消息框上升的速度更快些


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
    var sheyMsg=function(box,options) { 
this.box=this.g(box); 
this.setOptions(options); 
this.init(); 
} 
sheyMsg.prototype={ 
    ae:function(e,call) { 
        if(window.addEventListener)window.addEventListener(e,call,false); 
        else window.attachEvent("on"+e,call); 
    }, 
    g:function(id) {return typeof(id)=="string"?document.getElementById(id):id; }, 
    isFixed:!window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6")==-1 &&  document.compatMode=="CSS1Compat"), 
    setOptions:function(options) { 
this.options={//默认配置 
showDelay:0,//显示延时 
autoHide:20,//自动隐藏时间，设置为0时，不自动隐藏 
onShow:function(){},//显示后调用 
onHide:function(){}//隐藏后调用 
}; 
for(var o in options) { 
this.options[o]=options[o]; 
} 
    }, 
    hide:function() {//隐藏 
var _top=this.box.clientHeight; 
var o=this; 
if(/ing$/.test(o.status))return; 
o.status="hiding"; 
clearTimeout(o.tt); 
o.t=setInterval(function() { 
    if(o.isFixed) 
    o.box.style.bottom=(-o.box.clientHeight+(--_top))+'px'; 
else 
    o.box.style.top=o.de.scrollTop+o.de.clientHeight-5-(--_top) +"px"; 
if(_top==-5) { 
clearInterval(o.t); 
o.status="hide"; 
o.box.style.display="none"; 
o.options.onHide(); 
} 
},5); 
    }, 
    show:function() {//显示 
var _top=0; 
var o=this; 
if(/ing$/.test(o.status))return; 
o.status="showing"; 
clearTimeout(o.tt); 
o.box.style.display="block"; 
o.t=setInterval(function() { 
    if(o.isFixed) 
    o.box.style.bottom=(-o.box.clientHeight+(++_top))+"px"; 
else 
    o.box.style.top=(o.de.scrollTop+o.de.clientHeight-5-(++_top)) +"px"; 
if(_top==o.box.clientHeight) { 
clearInterval(o.t); 
o.status="show"; 
o.options.onShow(); 
var h=o.options.autoHide-0; 
if(h) o.tt=setTimeout(function() {o.hide();},h*1000); 
} 
},1); 
    }, 
    fixIE6:function() {//IE6 滚动定位 
        this.box.style.left=this.de.scrollLeft+this.de.clientWidth-this.box.clientWidth-2+"px"; 
        if(this.status=="show") {            
            this.box.style.top=this.de.scrollTop+this.de.clientHeight-this.box.clientHeight-5+"px"; 
        } else if(this.status=="hide") { 
    this.box.style.top=this.de.scrollTop+this.de.clientHeight+5+"px"; 
        } 
    }, 
    init:function() { 
with(this.box.style) { 
display="block";//显示之后才能取出宽度和高度 
if(this.isFixed) { 
position="fixed"; 
right="2px"; 
bottom=(-this.box.clientHeight-5)+"px"; 
} else { 
position="absolute"; 
} 
} 
this.status="hide"; 
var o=this; 
if(!this.isFixed) { 
    o.de=document.compatMode=="CSS1Compat"?document.documentElement:document.body; 
    var timer; 
    this.ae("resize",function() { clearTimeout(timer);timer=setTimeout(function(){o.fixIE6.call(o)},30);}); 
    this.ae("scroll",function() { clearTimeout(timer);timer=setTimeout(function(){o.fixIE6.call(o)},30);}); 
    this.fixIE6();//加载时指定位置 
} 
o.box.style.display="none"; 
o.tt=setTimeout(function() {o.show();},o.options.showDelay*1000); 
} 
} 
    </script><style type="text/css">
.msg { width:240px;display:none; }     .pink .top,.pink .top .title,.pink .top span,.pink .bottom,.pink .bottom a {background:transparent url(images/msg_bg_pink.gif) no-repeat 0px 0px;} 
    .pink .center {background:url(images/center_bg_pink.gif) repeat-y;} 
    
    .blue .top,.blue .top .title,.blue .top span,.blue .bottom,.blue .bottom a {background:transparent url(images/msg_bg_blue.gif) no-repeat 0px 0px;} 
    .blue .center {background:url(images/center_bg_blue.gif) repeat-y;} 
    
    .msg .top{width:240px;height:25px;position:relative;} 
    .msg .top .title {background-position:-195px -70px;padding-left:30px;line-height:22px;width:100px;height:25px;} 
    .msg .top span {background-position:0px -70px;width:36px; height:17px;position:absolute;top:1px;left:198px;cursor:pointer;} 
    .msg .top span:hover {background-position:-43px -71px;}     .msg .center { width:240px;height:115px;} 
    .msg .center h3{color:#0c4e7c;text-align:center;line-height:23px;font-size:13px;} 
    .msg .center p{color: #0c4e7c;margin:0px 10px;line-height:20px;}     .msg .bottom {height:29px;background-position:0px -32px;} 
    .msg .bottom a {background-position:-120px -75px;padding-left:20px;margin:7px 10px;float:right;width:30px;height:20px;} 
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <input type=button  id='sss' onclick="closewin()" value='关闭'/>
    <input type=button  id='Button1' onclick="openwin()" value='打开'/>
    <!--sheyMsg start--> 
<div class="msg pink" id="msgbox"> 
<div class="top"> 
    <div class="title">CSDN News</div> 
    <div id='btn'> 
    </div>
    <span title="close" id="msgclose"></span> 
</div> 
<div class="center"> 
<h3>仿腾讯右下角消息提示</h3> 
<p>showDalay:设置页面加载后显示时间延迟;<br />autoHide:显示后自动隐藏的时间，默认30秒，设置为0表示不自动隐藏;</p> 
</div> 
<div class="bottom"><a target="_blank" href="#">查看</a> 
</div> 
</div> 
<!--sheyMsg end--> 
<script type="text/javascript">
var msg=new sheyMsg("msgbox",{ 
    showDelay:0,// 
onHide:function(){ 
btn.value="Show"; 
}, 
onShow:function() { 
btn.value="Hide"; 
} 
});
msg.show();</script><script type="text/javascript">
    function openwin() {        var msg = new sheyMsg("msgbox", {
            showDelay: 0, // 
            onHide: function() {
                btn.value = "Show";
            },
            onShow: function() {
                btn.value = "Hide";
            }
        });
        msg.show();
    }    function closewin() {        var msg = new sheyMsg("msgbox", {
            showDelay: 0, // 
            onHide: function() {
                btn.value = "Show";
            },
            onShow: function() {
                btn.value = "Hide";
            }
        });
        msg.hide();
}
</script>
    </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    把控制上移的 (++_top) 改为 (_top=_top+k) ，k = 1,1.1，1.2，1.3 ...
    把检测上移边界的 if(_top==o.box.clientHeight) 改为 if(_top>=o.box.clientHeight)，因为不是每次1px，所以不能判相等
      

  2.   

    插件多加一个配置step ，设置每次移动的位置，默认1px，这样在创建实例的时候就可以配置这个项目控制速度<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var sheyMsg = function (box, options) {
                this.box = this.g(box);
                this.setOptions(options);
                this.init();
            }
            sheyMsg.prototype = {
                ae: function (e, call) {
                    if (window.addEventListener) window.addEventListener(e, call, false);
                    else window.attachEvent("on" + e, call);
                },
                g: function (id) { return typeof (id) == "string" ? document.getElementById(id) : id; },
                isFixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),
                setOptions: function (options) {
                    this.options = {//默认配置 
                        showDelay: 0, //显示延时 
                        autoHide: 20, //自动隐藏时间，设置为0时，不自动隐藏 
                        step: 1, //每次移动的距离，越打越快////////////////////////////////////多增加一个配置，每次移动的间距
                        onShow: function () { }, //显示后调用 
                        onHide: function () { } //隐藏后调用 
                    };
                    for (var o in options) {
                        if (options[o]!==undefined) this.options[o] = options[o]; ////////////////////////////////////应该判断下是否传递了配置，没传递使用默认的
                    }
                },
                hide: function () {//隐藏 
                    var _top = this.box.clientHeight;
                    var o = this;
                    if (/ing$/.test(o.status)) return;
                    o.status = "hiding";
                    clearTimeout(o.tt);
                    o.t = setInterval(function () {
                        _top -= o.options.step; ////////////////////////////////////
                        if (o.isFixed)
                            o.box.style.bottom = (-o.box.clientHeight + _top) + 'px';
                        else
                            o.box.style.top = o.de.scrollTop + o.de.clientHeight - 5 - _top + "px";
                        if (_top <= -5) {
                            clearInterval(o.t);
                            o.status = "hide";
                            o.box.style.display = "none";
                            o.options.onHide();
                        }
                    }, 5);
                },
                show: function () {//显示 
                    var _top = 0;
                    var o = this;
                    if (/ing$/.test(o.status)) return;
                    o.status = "showing";
                    clearTimeout(o.tt);
                    o.box.style.display = "block";
                    o.t = setInterval(function () {
                        _top += o.options.step; ////////////////////////////////////
                        if (o.isFixed)
                            o.box.style.bottom = (-o.box.clientHeight + _top) + "px";
                        else
                            o.box.style.top = (o.de.scrollTop + o.de.clientHeight - 5 - _top) + "px";
                        if (_top >= o.box.clientHeight) {
                            //o.box.clientHeight
                            clearInterval(o.t);
                            o.status = "show";
                            o.options.onShow();
                            var h = o.options.autoHide - 0;
                            if (h) o.tt = setTimeout(function () { o.hide(); }, h * 1000);
                        }
                    }, 1);
                },
                fixIE6: function () {//IE6 滚动定位 
                    this.box.style.left = this.de.scrollLeft + this.de.clientWidth - this.box.clientWidth - 2 + "px";
                    if (this.status == "show") {
                        this.box.style.top = this.de.scrollTop + this.de.clientHeight - this.box.clientHeight - 5 + "px";
                    } else if (this.status == "hide") {
                        this.box.style.top = this.de.scrollTop + this.de.clientHeight + 5 + "px";
                    }
                },
                init: function () {
                    with (this.box.style) {
                        display = "block"; //显示之后才能取出宽度和高度 
                        if (this.isFixed) {
                            position = "fixed";
                            right = "2px";
                            bottom = (-this.box.clientHeight - 5) + "px";
                        } else {
                            position = "absolute";
                        }
                    }
                    this.status = "hide";
                    var o = this;
                    if (!this.isFixed) {
                        o.de = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
                        var timer;
                        this.ae("resize", function () { clearTimeout(timer); timer = setTimeout(function () { o.fixIE6.call(o) }, 30); });
                        this.ae("scroll", function () { clearTimeout(timer); timer = setTimeout(function () { o.fixIE6.call(o) }, 30); });
                        this.fixIE6(); //加载时指定位置 
                    }
                    o.box.style.display = "none";
                    o.tt = setTimeout(function () { o.show(); }, o.options.showDelay * 1000);
                }
            } 
        </script><style type="text/css">
    .msg { width:240px;display:none; }     .pink .top,.pink .top .title,.pink .top span,.pink .bottom,.pink .bottom a {background:transparent url(images/msg_bg_pink.gif) no-repeat 0px 0px;} 
        .pink .center {background:url(images/center_bg_pink.gif) repeat-y;} 
        
        .blue .top,.blue .top .title,.blue .top span,.blue .bottom,.blue .bottom a {background:transparent url(images/msg_bg_blue.gif) no-repeat 0px 0px;} 
        .blue .center {background:url(images/center_bg_blue.gif) repeat-y;} 
        
        .msg .top{width:240px;height:25px;position:relative;} 
        .msg .top .title {background-position:-195px -70px;padding-left:30px;line-height:22px;width:100px;height:25px;} 
        .msg .top span {background-position:0px -70px;width:36px; height:17px;position:absolute;top:1px;left:198px;cursor:pointer;} 
        .msg .top span:hover {background-position:-43px -71px;}     .msg .center { width:240px;height:115px;} 
        .msg .center h3{color:#0c4e7c;text-align:center;line-height:23px;font-size:13px;} 
        .msg .center p{color: #0c4e7c;margin:0px 10px;line-height:20px;}     .msg .bottom {height:29px;background-position:0px -32px;} 
        .msg .bottom a {background-position:-120px -75px;padding-left:20px;margin:7px 10px;float:right;width:30px;height:20px;} 
    </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        
        <input type=button  id='sss' onclick="closewin()" value='关闭'/>
        <input type=button  id='Button1' onclick="openwin()" value='打开'/>
        <!--sheyMsg start--> 
    <div class="msg pink" id="msgbox"> 
    <div class="top"> 
        <div class="title">CSDN News</div> 
        <div id='btn'> 
        </div>
        <span title="close" id="msgclose"></span> 
    </div> 
    <div class="center"> 
    <h3>仿腾讯右下角消息提示</h3> 
    <p>showDalay:设置页面加载后显示时间延迟;<br />autoHide:显示后自动隐藏的时间，默认30秒，设置为0表示不自动隐藏;</p> 
    </div> 
    <div class="bottom"><a target="_blank" href="#">查看</a> 
    </div> 
    </div> 
    <!--sheyMsg end--> 
    <script type="text/javascript">
        var msg = new sheyMsg("msgbox", {
            showDelay: 0, // 
            step:10,///////////////////////每次移动10px
            onHide: function () {
                btn.value = "Show";
            },
            onShow: function () {
                btn.value = "Hide";
            }
        });
       // msg.show();//不用调用此方法了，创建的时候已经用计时器启动调用方法</script><script type="text/javascript">
    //用同一个实例就好了，重新申明干嘛？！！
        function openwin() {
           /* var msg = new sheyMsg("msgbox", {
                showDelay: 0, // 
                onHide: function () {
                    btn.value = "Show";
                },
                onShow: function () {
                    btn.value = "Hide";
                }
            });*/
            msg.show();
        }    function closewin() {
            /*var msg = new sheyMsg("msgbox", {
                showDelay: 0, // 
                onHide: function () {
                    btn.value = "Show";
                },
                onShow: function () {
                    btn.value = "Hide";
                }
            });*/
            msg.hide()
        }
    </script>
        </div>
        </form>
    </body>
    </html>