zoukankan      html  css  js  c++  java
  • js 动画效果代码,主要运用setTimeout

    代码只能对以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)">
  • 相关阅读:
    失格
    救赎
    篝火晚会
    旅行家的预算
    荒诞
    mod
    clique
    序列
    [CF932E]Team Work & [BZOJ5093]图的价值
    NOIWC2018游记
  • 原文地址:https://www.cnblogs.com/xiashengwang/p/2578796.html
Copyright © 2011-2022 走看看