                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

缓冲动画的问题

经常直接飞到屏幕上面看不见了。那个时间的代码可以忽视了，是正常的，我是做了倒计时的第一节课跳过来做缓冲动画的……

还有就是缓冲的原理虽然知道了，但是计算方式还是很晕

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function() {
            showTimes();
        }
        function timeCheck(i){
            if(i<10){
                i="0"+i;
            }
            return i;
        }
        function showTimes(){
            var main=document.getElementsByTagName("div")[0];
            var sp=document.getElementById("sp");
            var timeShow=new Date();
            var y=timeShow.getFullYear();
            var m=timeShow.getMonth();
            var d=timeShow.getDate();
            var w=timeShow.getDay();
            var hou=timeCheck(timeShow.getHours());
            var min=timeCheck(timeShow.getMinutes());
            var sec=timeCheck(timeShow.getSeconds());
            var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var weekShow=week[w];

            sp.innerHTML="当前时间："+y+"年"+m+"月"+d+"日 "+weekShow+" "+hou+":"+min+":"+sec;
            var t=setTimeout('showTimes()',500);
            main.onmouseover=function(){sportsTop(0)}
            main.onmouseout=function(){sportsTop(-50)}
        }
        var timer=null;
        function sportsTop(tops){
            clearInterval(timer);
            var main=document.getElementsByTagName("div")[0];
            var spe=(tops-main.offsetTop)/5;
            spe=spe>0?Math.ceil(spe):Math.floor(spe);
            timer=setInterval(function(){
                if(main.offsetTop==tops){
                    clearInterval(timer);
                }else{
                    main.style.marginTop=main.offsetTop+spe+"px";
                }
            },20);
        }
    </script>

    <style>
        *{
            padding:0;margin:0;
            font-family: "微软雅黑";
        }
        div{
            position:relative;
            top:0;
            left:0;
            box-shadow:0px 0px 7px 0px #a3a3a3;
            width:400px;
            height:60px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            text-align: center;
            cursor:default;
            background-color: #e4ffc8;
        }
        span{
            position:relative;
            line-height:60px;
            color: #aaaaaa;

        }
    </style>
</head>
<body>
    <div>
        <span id="sp">

        </span>
    </div>
</body>
</html>

榎目贵音

2016-04-07

源自：JS动画效果 3-1

关注问题我要回答

858

操作

收起

1 回答

宫阙
2016-04-09

function getStyle(obj,attr)

{

if(obj.currentStyle){

return obj.currentStyle[attr];//currentStyle 针对IE浏览器

}else{

return getComputedStyle(obj,false)[attr];//getComputedStyle 针对firefox浏览器

}

        var timer=null;
        function sportsTop(tops){
            clearInterval(timer);
            var main=document.getElementsByTagName("div")[0];
            var icur = parseInt(getStyle(main,'marginTop'));
            var spe=(tops-icur)/5;
            spe=spe>0?Math.ceil(spe):Math.floor(spe);
            timer=setInterval(function(){
                if(icur==tops){
                    clearInterval(timer);
                }else{
                    main.style.marginTop=icur+spe+"px";
                }
            },20);
        }