JSでスクロールと文字色褪せ効果を実現_JavaScriptスキル-jsチュートリアル-php.cn

JSでスクロールと文字色褪せ効果を実現_JavaScriptスキル

WBOY

リリース： 2016-05-16 16:44:13

オリジナル

1921 人が閲覧しました

Js は、スクロールと色変更のテキスト効果を実装しています。効果表示ページでは、コードを Web サイトにコピーした後、効果が非常に優れていることがわかります。必要なテキスト。

ソースコードは次のとおりです:

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

スクロールすると色が変わります

下のテキストの部分に注目してください。テキストが赤く染まり、赤の色が周期的に移動します。元のテキスト

="text/javascript">
var message="Ke Leyi.com へようこそ。ここには、Web フロントエンドやその他の学習教材があります。"
var neonbasecolor="#333333"
var neontextcolor ="#ff0000"
var neontextcolor2 = "#ff3333"
var flashspeed=100
var flashingletters=8
var flashingletters2=2
var flashpause=0
var n=0
if (document .all||document.getElementById){
document.write('')
for (m=0;mdocument.write('' message.charAt(m) '')
document.write('< /font>')
}
else
document.write(message)
functioncrossref(number){
varcrossobj=document.all eval("document.all.neonlight"数値) : document.getElementById ("ネオンライト" 数値)
returncrossobj
}
function neon(){
if (n==0){
for (m=0;m<) ;message.length;m )
crossref(m).style.color=neonbasecolor
}
crossref(n).style.color=neontextcolor
if (n>flashingletters-1)crossref( n-flashingletters).style .color=neontextcolor2
if (n>(flashingletters flashingletters2)-1)crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (nn
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
< /script>

keleyi.com