Heim > Web-Frontend > js-Tutorial > Hauptteil

Native JS implementiert LOADING effect_javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:09:09
Original
1401 Leute haben es durchsucht

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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage