DOM 요소 변형 효과(도구 기능)_javascript 기술

JS를 사용하여 동작과 페이지 성능을 제어하세요. 우리가 가장 흔히 사용하는 일이 아닌가 싶습니다...
jQuery가 인기 있는 이유는 한편으로는 jQuery의 선택기[selector]가 충분히 훌륭하고 다른 한편으로는 jQuery가 인기가 있는 이유라고 생각합니다. DOM 변환에 많은 노력을 기울였습니다.
따라서 오타쿠가 되려는 목적을 고수하기 위해 주말에 이틀 밤을 보내며 약간의 요약을 하고 DOM 요소의 변형을 제어하는 ​​코드를 작성했습니다. 현재의 강력한 프레임워크와 비교하면 꽤 그럴듯해 보입니다. 조금은 서툴지만 일상적인 개발로 도구 기능은 꽤 실용적이라고 생각합니다. (이것이 저의 원래 목적이기도 합니다 ^_^).
본론으로 들어가자면 먼저 전체 소스 코드를 게시하세요. (공유 및 학습의 원칙에 따라 소스 코드를 마음대로 수정할 수 있습니다.)

코드 복사 코드는 다음과 같습니다.

//////////////* = Hongru.anim.js =*////////////
// @author: hongru.chen //
// @date: 2010-10-17 //
///// ////////////// /////////////////////////
var Hongru = {
get: 함수(id) {return document.getElementById(id)} ,
tween: {
linear: 함수(f, t, d) { return t * d f },
ease: 함수 (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 < o.duration) {
for (var k in o.val) {
var m = o.val[k]
o.obj[k] = Math.ceil(o. easy(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 < l; il ) {
var obj = this .get(objList[il]) || objList[il]
var o = {};
o.cssMode = true;
o.o = obj;
o.obj = obj.style;
for(var k in 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:
diff: p[i] -
}
} 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 :
o.start = (new Date()).getTime()
this.tweens.push(o); ;
if (!this.running) this.running = window .setInterval(animimg, 10);
objReturn.push(o);
}
return objReturn.length === 1 ? o : objReturn;
},
stop : function ( ) {
if (!this.tweensCnt) {
window.clearInterval(this.running)
this.running = false;
}
},
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);
this.stop()
}
}
}
},
: 함수() {
this.tweensCnt = 0;
this.stop();
while( 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>Tweens </title>