JavaScript常用封裝函數(shù)

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

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

基本運動
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);

}

抖動

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

}

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

if( obj.currentStyle ){

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

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

}

獲取計算后的樣式并且賦值
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不是真值或者沒有上一個兄弟節(jié)點的情況。

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

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

}

function getNext( obj ){

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

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

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

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

}

function getFirst( obj ){

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

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

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

//如果第一個子節(jié)點不是元素節(jié)點，就以第一個子節(jié)點為當前節(jié)點，查找下一個兄弟節(jié)點。

}

function getLast( obj ){

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

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

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

//如果第一個子節(jié)點不是元素節(jié)點，就以第一個子節(jié)點為當前節(jié)點，查找下一個兄弟節(jié)點。

}

獲取元素在當前頁面中的絕對位置
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云服務器云服務器 javascript函數(shù)封裝 javascript常用函數(shù) java常用類封裝封裝函數(shù)

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87581.html

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

摘要：前言這個系列的上一篇文章編寫自己的代碼庫常用實例的實現(xiàn)與封裝總結(jié)了個常見的操作。前序修改以及寫法優(yōu)化此處修改之前提交函數(shù)已經(jīng)發(fā)現(xiàn)的，基于這個系列上篇文章的提供的函數(shù)。 1.前言這個系列的上一篇文章（編寫自己的代碼庫（javascript常用實例的實現(xiàn)與封裝））總結(jié)了34個常見的操作。但是在開發(fā)中，常見的實例又何止這么多個，經(jīng)過這些日子的探索，以及他人的意見，現(xiàn)在得追加一些操作實例了。...

Atom 2019-08-20 18:34 評論0 收藏0
JavaScript常用腳本集錦1

摘要：初始化參數(shù)可選參數(shù)，必填參數(shù)可選，只有在請求時需要參數(shù)可選回調(diào)函數(shù)可選參數(shù)可選，默認為參數(shù)可選，默認為創(chuàng)建引擎對象打開發(fā)送普通文本接收文檔將字符串轉(zhuǎn)換為對象最后，說明一下此函數(shù)的用法。即等待與成功回調(diào)，后標志位置為。 jquery限制文本框只能輸入數(shù)字 jquery限制文本框只能輸入數(shù)字,兼容IE、chrome、FF（表現(xiàn)效果不一樣）,示例代碼如下： $(input).keyup(...

ygyooo 2019-08-21 10:22 評論0 收藏0
【Vue原理】Vue源碼閱讀總結(jié)大會 - 序

摘要：扎實基礎幸好自己之前花了大力氣去給自己打基礎，讓自己現(xiàn)在的基礎還算不錯。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Vue源碼閱讀總結(jié)大會 - 序閱讀源碼是需...

Edison 2019-08-23 18:18 評論0 收藏0
常用的JavaScript編程風格

摘要：工作中好的編程風格會更友好，不好的編程風格會讓隊友難受變量的聲明使用和代替存在變量提升等副作用，聲明常量使用命名規(guī)范使用小駝峰命名，變量名可讀性好使用變量說明不要出現(xiàn)讓人覺得晦澀難懂的變量不要重復命名當一個對象名有意義的時候，對象里面的的命工作中好的編程風格會更友好，不好的編程風格會讓隊友難受變量的聲明使用let和const代替var（var存在變量提升等副作用），聲明常量使用c...

explorer_ddf 2019-08-23 16:55 評論0 收藏0
前端基礎入門五（掌握jQuery的常用api，實現(xiàn)動態(tài)效果）

摘要：基本概念學習目標學會如何使用，掌握的常用，能夠使用實現(xiàn)常見的效果。想要實現(xiàn)簡單的動畫效果，也很麻煩代碼冗余。實現(xiàn)動畫非常簡單，而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念學習目標：學會如何使用jQuery，掌握jQuery的常用api，能夠使用jQuery實現(xiàn)常見的效果。為什么要學習jQuery？【01-讓div顯示與設置內(nèi)容.html】使用javasc...

nevermind 2019-08-30 15:55 評論0 收藏0