div の移動は、実際には div とブラウザの境界線の間の距離の変化です。変化率が一定の場合は等速運動、変化率が一定でない場合は可変速運動です。変化率がブラウザの境界線からの距離に比例する場合、div はバッファリング動作を行っていると言えます。
実際には、これは非常に簡単です。タイマーを使用して、div とブラウザの境界線の間の距離を時々変更するだけです。
たとえば、一定の速度で移動する:
タイマーを入力します: (30 ミリ秒ごとに実行)
if (終点に到達するかどうか)
{タイマーを停止}
else do{距離を変更}
距離を変更する方法により、一定速度で移動するか可変速度 (バッファリング) で移動するかが決まります。
例:
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer); 🎜>timer =setInterval(function () {
var iSpeed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft iSpeed
}
},30); 🎜>
バッファの移動:
コードをコピー
コードは次のとおりです: var timer=null; function startMove()
{
var iTarget=300;
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function () {
var iSpeed=(iTarget-oDiv.offsetLeft)/8;
iSpeed=iSpeed>0? Math.ceil(iSpeed):Math .floor(iSpeed);
iSpeed=Math.ceil(iSpeed);
if(oDiv.offsetLeft==iTarget)
{
clearInterval(タイマー);
}
else
{
oDiv.style.left=oDiv.offsetLeft iSpeed 'px';
}
document.title=oDiv.style.left ' ' iSpeed;
},30 );
このようにしてモーションフレームワークが記述されます。原理は単純ですが、まだ完成させる必要があります。ゆっくりしてください!