首頁 > web前端 > js教程 > 主體

原生JS實作LOADING效果_javascript技巧

WBOY
發布: 2016-05-16 16:09:09
原創
1401 人瀏覽過

純文字loading效果,可以自己定義顏色和速度

複製程式碼 程式碼如下:

/**載入動畫
* 由 Black and White Mark 於 2011 年 3 月 15 日創作。
號*/
 
function loading(element,lightColor,darkColor,speed,callback){
    if(!element&&(!element.innerText||!element.textContent))return
    element = typeof element==="string"?document.getElementById(element):element
    lightColor = lightColor||"#fff",darkColor = darkColor||"#000",speed = speed||300
 
    var arr_spanEles = new Array()
    
    !function(arr_elementText){
        element.innerText=element.textContent=""
        for(var i=0;i             var span = document.createElement("span")
            element.innerText?span.innerText = arr_elementText[i]:span.textContent = arr_elementText[i]
            element.appendChild(span)
            arr_spanEles.push(span)
        }
    }((element.innerText||element.textContent).split(""))
 
    var index = -1,length = arr_spanEles.length
    var loadingTimer = setInterval(function(){
        arr_spanEles[Math.max(index,0)].style.color = darkColor
        if(index == length-1){
            index = -1
            callback&&callback()
        }
        index
        arr_spanEles[index].style.color = lightColor
    },speed)
}

以上就是本文所述的全部內容了,希望對大家學習javascript能有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板