ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ JS は LOADING 効果_JavaScript スキルを実装します

ネイティブ JS は LOADING 効果_JavaScript スキルを実装します

WBOY
リリース: 2016-05-16 16:09:09
オリジナル
1411 人が閲覧しました

プレーンテキスト読み込み効果、色と速度を自分で定義できます

コードをコピーします コードは次のとおりです:

/**Loading animation
 *  Created by 黑と白の印記 on 15/03/11.
 */

関数読み込み(要素、ライトカラー、ダークカラー、速度、コールバック){
If(!element&&(!element.innerText||!element.textContent))return
要素 = 要素の種類==="文字列"?document.getElementById(要素):要素
lightColor = lightColor||"#fff"、darkColor = darkColor||"#000"、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(スパン)
}
}((element.innerText||element.textContent).split(""))

var インデックス = -1、長さ = arr_spanEles.length
varloadTimer = setInterval(function(){
arr_spanEles[Math.max(index,0)].style.color = darkColor
If(インデックス == 長さ-1){
インデックス = -1
callback&&callback()
}
インデックス
arr_spanEles[index].style.color = lightColor
},スピード)
}

以上がこの記事で説明した内容のすべてです。JavaScript を学習するすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート