先头——JavaScript基础编アニメーション(先に遅いアニメーション効果)demo

今日はアニメの例を緩めに来ました.自分の後のコピー・貼り付けのためです.助けていただければ、持って行ってもいいです.話を多くしないで、直接コードをかけます.
 

	        ，     

       

js部分:

		var odiv = document.querySelector('.box');
		var obtn = document.querySelector('button');
		function animate(odiv,target,callback){
			clearInterval(odiv.timer);
			odiv.timer = setInterval(function(){
				console.log(1);
				var step = (target - odiv.offsetLeft) / 10 ;//     -     
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				if (odiv.offsetLeft === target) {
					clearInterval(odiv.timer);
					if (callback) {
						callback();
					}
				}
				
				odiv.style.left = odiv.offsetLeft + step + 'px';
				
			},30);			
		}
		obtn.addEventListener('click',function(){
			animate(odiv,1000,function(){
				alert('    ');
			})
		})

思考解析:
目標距離:target:500初回(500-0)/10 =50第二回(500-50)/10 =45回目 (500-(50+45)/10=40.5      第二次移動終了後のdivの距離は95=50+45、つまり3回目の移動開始の初期位置です. ...
 クイックボタンを押すと、何度も起動したものと同じです.タイマーは常に重畳しています.速度がますますブロックされます 解決:     1、対象元素のodiv.timerにタイマーの値を付与し、タイマーを実行する時はタイマーに停止します.     2、小数点問題:右に移動(目標値＞0)する時は上に整数を取り、目標に近づくようにする                     Math.ceeir(step) 例えば:7.1 上に取ります                     左に移動(目標値<0)すると下に整数を取ります.同じです.                     Math.flor(step) 例えば、-9.9を下に取る-10     3、ページドキュメントのデフォルトの内外脚本家をクリアした場合 
 機能を追加:     コールバック関数:アニメーション終了後の動作     イベントをトリガーした後           タイマーメソッドを起動する時:三つ目のパラメータを渡すこのパラメータは関数です.         タイマーの方法は第三の参照を受信し、アニメーション終了後にこのパラメータを呼び出します.
 
 
 
 
 
私の文章は全部学習中の総括です.もし間違いを見つけたら、メッセージを歓迎します.