基本運動
function doMove(obj,attr,speed,target,endFn){css
var iCur = getStyle( obj, attr ); speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed); clearInterval(obj.timer); obj.timer = setInterval(function(){ iCur = getStyle( obj, attr ) + speed; if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){ iCur = target; } obj.style[attr] = iCur + 'px'; if(iCur == target){ clearInterval(obj.timer); if( typeof endFn === 'function' ){ endFn(); } } },30);
}node
透明度變化
function opacity(obj,speed,target,endFn){函數
var iCur = getStyle( obj, 'opacity' ) * 100; speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed); clearInterval(obj.alpha); obj.alpha = setInterval(function(){ iCur = getStyle( obj, 'opacity' )*100 + speed; if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){ iCur = target; } obj.style.opacity = iCur / 100; obj.style.filter = 'alpha(opacity: '+ iCur +')'; if(iCur == target){ clearInterval(obj.alpha); if( typeof endFn === 'function' ){ endFn(); } } },30);
}code
抖動遞歸
function shake(obj,attr,endFn){事件
var pos = getStyle(obj,attr); var arr = []; for(var i=14; i>=0; i-=2){ arr.push(-i,i); } obj.shake = setInterval(function(){ obj.style[attr] = pos + arr[i++] + 'px'; if(i==arr.length){ clearInterval(obj.shake); if( typeof endFn === 'function' )endFn(); } },30);
}ci
獲取計算後的樣式
function getStyle( obj ,attr ){get
if( obj.currentStyle ){ return parseFloat( obj.currentStyle[attr] || 1 ); } return parseFloat( getComputedStyle(obj)[attr] );
}it
獲取計算後的樣式而且賦值
function css(obj,attr,val){io
if(val) { if(attr=="opacity") { obj.style['opacity']=val/100; obj.style['filter']="alpha(opacity="+val+")"; } else { obj.style[attr]=val+"px"; } } else { iVal=parseFloat(getStyle(obj,attr)); if(attr=="opacity") { iVal=Math.round(iVal*100); } return iVal; }
}
事件綁定
function bind(obj,ev,fn){
if( obj.addEventListener ){ obj.addEventListener(ev,fn,false); }else{ obj.attachEvent('on' + ev,function(){ fn.call(obj); }); }
}
DOM下經常使用封裝函數
function getPrev( obj ){
if( !obj || !obj.previousSibling )return null; //先處理obj不是真值或者沒有上一個兄弟節點的狀況。 return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling ); //遞歸 //不斷往上一層一層地找元素節點,直到找到或者返回Null爲止。
}
function getNext( obj ){
if( !obj || !obj.nextSibling )return null; //先處理obj不是真值或者沒有下一個兄弟節點的狀況。 return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling ); //遞歸 //不斷往下一層一層地找元素節點,直到找到或者返回Null爲止。
}
function getFirst( obj ){
if( !obj || !obj.firstChild )return null; //先處理obj不是真值或者沒有第一個兄弟節點的狀況。 return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild ); //遞歸 //若是第一個子節點不是元素節點,就以第一個子節點爲當前節點,查找下一個兄弟節點。
}
function getLast( obj ){
if( !obj || !obj.lastChild )return null; //先處理obj不是真值或者沒有最後一個兄弟節點的狀況。 return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild ); //遞歸 //若是第一個子節點不是元素節點,就以第一個子節點爲當前節點,查找下一個兄弟節點。
}
獲取元素在當前頁面中的絕對位置
function posLeft( obj ){
var iLeft = 0; while( obj ){ iLeft += obj.offsetLeft; obj = obj.offsetParent; } return iLeft; }
function posTop( obj ){
var iTop = 0; while( obj ){ iTop += obj.offsetTop; obj = obj.offsetParent; } return iTop; }