JavaScript常用封裝函數(shù)

v1 發(fā)布于2019-08-21 12:24 / 826人閱讀

摘要：基本運(yùn)動(dòng)透明度變化抖動(dòng)獲取計(jì)算后的樣式獲取計(jì)算后的樣式并且賦值事件綁定下常用封裝函數(shù)先處理不是真值或者沒(méi)有上一個(gè)兄弟節(jié)點(diǎn)的情況。遞歸不斷往上一層一層地找元素節(jié)點(diǎn)，直到找到或者返回為止。獲取元素在當(dāng)前頁(yè)面中的絕對(duì)位置

基本運(yùn)動(dòng)
function doMove(obj,attr,speed,target,endFn){

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);

}

透明度變化
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);

}

抖動(dòng)

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);

}

獲取計(jì)算后的樣式
function getStyle( obj ,attr ){

if( obj.currentStyle ){

    return parseFloat( obj.currentStyle[attr] || 1 );   
} 

return parseFloat( getComputedStyle(obj)[attr] );

}

獲取計(jì)算后的樣式并且賦值
function css(obj,attr,val){

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下常用封裝函數(shù)
function getPrev( obj ){

if( !obj || !obj.previousSibling )return null;

//先處理obj不是真值或者沒(méi)有上一個(gè)兄弟節(jié)點(diǎn)的情況。

return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling ); //遞歸

//不斷往上一層一層地找元素節(jié)點(diǎn)，直到找到或者返回Null為止。

}

function getNext( obj ){

if( !obj || !obj.nextSibling )return null;

//先處理obj不是真值或者沒(méi)有下一個(gè)兄弟節(jié)點(diǎn)的情況。

return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling ); //遞歸

//不斷往下一層一層地找元素節(jié)點(diǎn)，直到找到或者返回Null為止。

}

function getFirst( obj ){

if( !obj || !obj.firstChild )return null;

//先處理obj不是真值或者沒(méi)有第一個(gè)兄弟節(jié)點(diǎn)的情況。

return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild ); //遞歸

//如果第一個(gè)子節(jié)點(diǎn)不是元素節(jié)點(diǎn)，就以第一個(gè)子節(jié)點(diǎn)為當(dāng)前節(jié)點(diǎn)，查找下一個(gè)兄弟節(jié)點(diǎn)。

}

function getLast( obj ){

if( !obj || !obj.lastChild )return null;

//先處理obj不是真值或者沒(méi)有最后一個(gè)兄弟節(jié)點(diǎn)的情況。

return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild ); //遞歸

//如果第一個(gè)子節(jié)點(diǎn)不是元素節(jié)點(diǎn)，就以第一個(gè)子節(jié)點(diǎn)為當(dāng)前節(jié)點(diǎn)，查找下一個(gè)兄弟節(jié)點(diǎn)。

}

獲取元素在當(dāng)前頁(yè)面中的絕對(duì)位置
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;

}

GPU云服務(wù)器云服務(wù)器 javascript函數(shù)封裝 javascript常用函數(shù) java常用類封裝封裝函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87581.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

v1

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤(pán)點(diǎn)# 數(shù)據(jù)庫(kù)的一些重要概念

閱讀 1090·2021-11-22 15:33
VmShell：香港CMI大寬帶雙11活動(dòng)！首月半價(jià)，年付6折，3日內(nèi)無(wú)條件退款！

閱讀 3395·2021-11-08 13:20
一鍵安裝寶塔Linux面板和一鍵卸載寶塔Linux面板命令

閱讀 1414·2021-09-22 10:55
聊聊Ajax那些事

閱讀 2075·2019-08-29 11:08
文章6：JS高級(jí)

閱讀 800·2019-08-26 12:24
瀏覽器的微任務(wù)MicroTask和宏任務(wù)MacroTask

閱讀 3101·2019-08-23 17:15
babel歸納總結(jié)

閱讀 2260·2019-08-23 16:12
搜索關(guān)鍵字高亮 JS replace() 變量的全局替換

閱讀 1971·2019-08-23 16:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript常用封裝函數(shù)

相關(guān)文章

**編寫(xiě)自己的代碼庫(kù)（javascript常用實(shí)例的實(shí)現(xiàn)與封裝--續(xù)）**

JavaScript常用腳本集錦1

【Vue原理】Vue源碼閱讀總結(jié)大會(huì) - 序

**常用的JavaScript編程風(fēng)格**

前端基礎(chǔ)入門(mén)五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

發(fā)表評(píng)論

0條評(píng)論

v1

男|高級(jí)講師

TA的文章

#yyds干貨盤(pán)點(diǎn)# 數(shù)據(jù)庫(kù)的一些重要概念

VmShell：香港CMI大寬帶雙11活動(dòng)！首月半價(jià)，年付6折，3日內(nèi)無(wú)條件退款！

一鍵安裝寶塔Linux面板和一鍵卸載寶塔Linux面板命令

聊聊Ajax那些事

文章6：JS高級(jí)

瀏覽器的微任務(wù)MicroTask和宏任務(wù)MacroTask

babel歸納總結(jié)

搜索關(guān)鍵字高亮 JS replace() 變量的全局替換

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript常用封裝函數(shù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！