雁过请留痕...
代码改变世界

js 动画效果代码,主要运用setTimeout

2011-09-20 17:14  xiashengwang  阅读(280)  评论(0编辑  收藏  举报

代码只能对以px为单位的样式进行改变。

js Code:

            function animate(ele,name,from,to,time) {
                time = time ||800;
                var interval,count,step,now;
                interval = 60;
                count =Math.round(time/interval);
                step = Math.round((to-from)/count);
                now = from;
                var style = document.getElementById(ele).style;
                function go() {
                    count--;
                    now = count?now+step:to;
                    style[name] = now + "px";
                    if(count) {
                        setTimeout(go,interval);
                    }
                }

                style[name] = from + 'px';
                setTimeout(go,interval);
            }

html Code:

        <p >
            <span id ='s1'>goole!!!!!goole</span>
        </p>
        <input type="button" value="changeSize" onclick="animate('s1','font-size',9,50,1000)">