求JS特效 不断变色的文字

JavaScript019

求JS特效 不断变色的文字,第1张

没看到楼主给的效果，俺就自己试试吧。

两个文件，一个test.html，里面内容是：

<head><LINK rel="stylesheet" href="css.css" type="text/css"></head>

<body onLoad="doThing()"><SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var rate = 1000

// do not edit below this line

var i = 0

var F = 'F1'

function doThing() {

if (document.getElementById&&document.all) {

ok = true

i++

if (i==1) F = 'F1'

if (i==2) F = 'F2'

if (i==3) F = 'F3'

YammaYamma.className = F

if (i >2) i = 0

timer = setTimeout('doThing()', rate)

}

}

// End -->

</script>

<span id="YammaYamma">

<b>

haifeng place is your good friend forever!</b>

</span>

第二个文件是css。我命名为css.css，内容为：

.F1 {filter: glow(Color=#FF8000,Strength=10)

width=270px

height=40px}

.F2 {filter: glow(Color=#00FF00,Strength=9)

width=270px

height=40px}

.F3 {filter: glow(Color=#0080FF,Strength=12)

width=270px

height=40px}

整好后，用ie打开html就可以看到效果了。楼主看看咋样。

把两段JS脚本合为一个：

<script language="JavaScript" type="text/javascript">

if (navigator.appName.indexOf('Netscape') == '-1')

{

var colors = ["#000000","#FF5500","#000000","#FF5500","#000000","#FF5500"]

var nextcolor = 0

var nextcolor1 = 1

function changecolor()

{

document.all.FlashText1.style.color = colors[nextcolor++]

document.all.FlashText2.style.color = colors[nextcolor1++]

nextcolor = nextcolor % colors.length

nextcolor1 = nextcolor1 % colors.length

}

setInterval("changecolor()", 200)

}

</script>

1、用jquery的话，fadeIn ，fadeOut , fadeToggle

2、配合css3,用animation或transform变化 opacity 在 0~1间变换就行

3、用setTimeout或requestAnimationFrame 变换 opacity