ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptによる等速運動と可変速(バッファリング)運動の詳しい紹介_基礎知識

JavaScriptによる等速運動と可変速(バッファリング)運動の詳しい紹介_基礎知識

WBOY
リリース: 2016-05-16 17:48:30
オリジナル
1428 人が閲覧しました

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


このようにしてモーションフレームワークが記述されます。原理は単純ですが、まだ完成させる必要があります。ゆっくりしてください!
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート