Dom要素の変形効果(ツール機能)_JavaScriptスキル

js を使用して動作とページのパフォーマンスを制御します。申し訳ありませんが、これが私たちがこれを使用して行う最も一般的なことだと思います...
jQuery がこれほど人気が​​ある理由は、一方ではそのセレクター [selector] が十分に素晴らしいからだと思いますが、他方ではこれは、DOM 変換に多大な労力が費やされたことに起因すると考えられます。
そこで、オタクの目的に沿って、週末に二晩かけて少しまとめ、dom要素の変換を制御するコードを書きました。現在の強力なフレームワークと比較すると、確かにそうです。少々不器用ではありますが、日々の開発としてはかなり実用的なツール機能だと思います。 （これも本来の目的です^_^）。
早速本題に入ります。まず完全なソース コードを投稿します: (共有と学習の原則に従って、ソース コードは自由に変更できます)

コードをコピーします コードは次のとおりです:

//////////////* = Honru.anim.js =*////////////
// @author: hongru.chen //
// @date: 2010-10-17 //
///// /////////////// //////////////////////////
var Honru = {
get : function (id) {return document.getElementById(id)} ,
tween : {
linear : function (f, t, d) { return t * d f },
ease : function; (f, t, d) { return -t * .5 * ( Math.cos(Math.PI * d) - 1) f; }
},
tweens: [],
tweensCnt: 0,
anim : function (obj, params) {
var self = this,
objList = [],
objReturn = [];
var animimg = function () {
var i = -1, o;
while( o = self.tweens[ i] ) {
var cTime = (new Date()).getTime() - o.start; cTime for (var k in o.val) {
var m = o.val[k] = Math.ceil(o. ease(m.from, m.diff, cTime/o.duration) ) (o.cssMode ? 'px' : 0);
}
} else {
cTime = o.duration; >for (var k in o.val) {
var m = o.val[k];
o.obj[k] = Math.ceil(o.ease(m.from, m.diff, cTime/o.duration)) (o.cssMode ? 'px' : 0);
}
self.tweens.splice(i, 1);
self.tweensCnt--; (o.onFinish) o.onFinish (o.params);
self.stop();
if (!o.cssMode) o.obj.onTween(); 🎜>};
if (typeof obj == "string" || !obj.length) objList.push(obj); else objList = obj;
for (var il = 0, l = objList.length ; il < il ) {
var obj = this .get(objList[il]) ||
o.val = {};
o.cssMode = true;
o.obj = obj.style;
for (params の var p = params[k]; 🎜>if (k === "cssMode") {
if (p === false) {
o.cssMode = false;
o.obj =
}
} else if (k === "onTween") {
o.obj.onTween = p;
} else if (k === "from") {
for (var i in p) o.obj[i] = o.cssMode ? (Math.ceil( p[i]) 'px') : p[i]; else if (k === "to") {
for (var i in p) {
var from = o.cssMode ? (parseInt(o.obj[i]) || 0) : (o.obj[i] || 0); val[i] = {
from: from,
diff: p[i] - from
}
} else o[k] = params[k]; >}
if (!o.ease) o.ease = this.tween.ease;
if (!o.cssMode && params['from']) o.obj.onTween(); o.duration = params.duration ? params.duration : 1000;
o.start = (new Date()).getTime();
this.tweens.push(o); ;
if (!this.running) this.running = window .setInterval(animimg, 10);
}
return objReturn.length === 1 ? o : objReturn;
},
stop : function ( ) {
if (!this.tweensCnt) {
window.clearInterval(this.running);
}
},
kill : function ( obj) {
if (obj) {
for (var i = 0; i < this.tweensCnt; i ) {
if (this.tweens[i] === obj || this.tweens[i].o === obj || this.tweens[i].o === this.get(obj)) {
this.tweensCnt--;
this.tweens.splice(i , 1);
}
}
},
リセット: function () {
this.tweensCnt = 0;
this.tweens.length ) {
this.tweens.stop();
}
}


メソッドを呼び出すという観点から見ると、私の実装メソッドは実際には YUI に似ています。最も単純な例は次のとおりです。




コードをコピー


コードは次のとおりです:


Hongru.anim(id, {
from: {
top: 0、
左: 100
}、
から: {
左: 500、
}
});
このコードを呼び出すと次のような効果が得られます:

<meta http-equiv="Content-type" content="text/html; charset=gb2312"> <title></title>