Home > Web Front-end > JS Tutorial > Native JS implements LOADING effect_javascript skills

Native JS implements LOADING effect_javascript skills

WBOY
Release: 2016-05-16 16:09:09
Original
1412 people have browsed it

Plain text loading effect, you can define the color and speed yourself

Copy code The code is as follows:

/**Loading animation
* Created by Black and White Mark on 15/03/11.
​*/

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

The above is all the content described in this article. I hope it will be helpful to everyone learning javascript.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template