                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

949

操作

收起

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);
????????}