手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Js实现滚动变色的文字效果
Js实现滚动变色的文字效果
摘要:Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文...

Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。

以下是源代码:

复制代码 代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>滚动变色的文字js特效</title>

</head>

<body>

<div>

请注意下方的文字,部分文字染成红色,且红色循环移动。 <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">原文</a>

</div>

<script type="text/javascript">

var message="欢迎访问柯乐义网,这里有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('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}

else

document.write(message)

function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

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 (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",flashpause)

return

}

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

<div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></div>

</body>

</html>

【Js实现滚动变色的文字效果】相关文章:

javascript实现可拖动变色并关闭层窗口实例

js输入中文效果

javascript实现淡蓝色的鼠标拖动选择框实例

jQuery实现html表格动态添加新行的方法

Javascript实现div层渐隐效果的方法

JQuery中DOM实现事件移除的方法

jquery实现弹出层效果实例

jQuery实现延迟跳转的方法

JavaScript实现鼠标拖动效果的方法

jQuery仿gmail实现fixed布局的方法

精品推荐
分类导航