JavaScriptモーションフレームワークのコード共有例

div に枠線を追加します。枠線: 1px 単色黒です

window.onload = function(){
var div = document.getElementById('div1');

div.onclick = function(){
setInterval( function（）{
div.style.width = div.offsetwidth-1+'px'
逆に増えたのはなぜでしょうか？

オフセット シリーズの属性にはこれらの問題があることがわかりました。以下で修正しましょう

1. currentStyle は現在のスタイルですが、Google および Firefox と互換性がありません

2. getComputedStyle は計算されたスタイルであり、 ie8 とは互換性がありません -如 具体的なコードは次のとおりです。

パスのパラメータ OBJ は取得のオブジェクトを参照します。 Name はスタイル属性です。

Function getstyle (obj, name) {

// CurrentStyle: 現在のスタイル

iF (obj.currentstruction) {

return obj. )[name];//IE8 とは互換性がありません--

}

}

次のステップは、move 関数を進化させることです

開始を変更する必要があります。 var start = obj.offsetLeft; から var start = parseFloat(getStyle(obj,name));

getStyle(obj,name) は文字列を取得するため、型を変換するには parseFloat を使用する必要があります

コードは次のとおりです

フェードインも学びましたこれを行うには透明性を使用できますが、どうすればよいでしょうか?

まず、不透明度属性があるかどうかを判断する必要があります。ある場合は、透明度は 10 進数であるため、透明度 * 100 を使用する必要があります。それ以外の場合は、デフォルトを使用し続けます。

if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{

obj.style [name] = cur +'px';

}

上記のコードは一方向にしか移動できませんが、まず下に500進み、次に左に100進みたいのですが、どうすればよいですか?

コールバック関数について以前に学んだことがありますが、彼にコールバック関数を渡しても大丈夫ですか？

目的地に移動する際に、コールバック関数があるかどうかを判断します。存在する場合は実行され、存在しない場合は実行されません。

具体的なコードは以下の通りです

window.onload = function(){

var oDiv = document.getElementById('div1');

var timer;

function getStyle(obj,name){

//currentStyle: the現在のスタイル

if(obj.currentStyle){

return obj.currentStyle[name];//Google および Firefox と互換性がありません

}else{

//getComputedStyle: 計算されたスタイル

return getComputedStyle(obj,false)[name]; // IE8 とは互換性がありません--
}
}
function move(obj,name,target,dur,fn){
var count = parseInt(dur/30);//合計回数
var start = parseFloat( getStyle(obj,name ));//スタートからの距離
var dis = target - start;//距離
//ステップの長さ
// var step =dis/count;
var n = 0;//現在の数ステップ

timer = setInterval (function(){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj. style.filter = 'alpha ('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}

},30)
}

oDiv.onclick = function(){

move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}

待ち续....

以上がJavaScriptモーションフレームワークのコード共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。