ホームページ > 記事 > ウェブフロントエンド > 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 を使用する必要があります
コードは次のとおりです
}
上記のコードは一方向にしか移動できませんが、まず下に500進み、次に左に100進みたいのですが、どうすればよいですか?
コールバック関数について以前に学んだことがありますが、彼にコールバック関数を渡しても大丈夫ですか?
目的地に移動する際に、コールバック関数があるかどうかを判断します。存在する場合は実行され、存在しない場合は実行されません。
具体的なコードは以下の通りです
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 サイトの他の関連記事を参照してください。