Heim  >  Artikel  >  Web-Frontend  >  Native JS implementiert LOADING effect_javascript-Fähigkeiten

Native JS implementiert LOADING effect_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:09:091363Durchsuche

Einfacher Text-Ladeeffekt, Farbe und Geschwindigkeit können Sie selbst festlegen

Code kopieren Der Code lautet wie folgt:

/**Animation wird geladen
* Erstellt von Black and White Mark am 15.03.11.
​*/

Funktionsladen(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
},Geschwindigkeit)
}

Das Obige ist der gesamte in diesem Artikel beschriebene Inhalt. Ich hoffe, dass er für alle hilfreich ist, die Javascript lernen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn