当前位置: 首页 > 编程笔记 >

Js实现滚动变色的文字效果

干稳
2023-03-14
本文向大家介绍Js实现滚动变色的文字效果,包括了Js实现滚动变色的文字效果的使用技巧和注意事项,需要的朋友参考一下
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。
以下是源代码:
 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>滚动变色的文字js特效</title> 
</head> 
<body> 
<div style="width:736px;"> 
请注意下方的文字,部分文字染成红色,且红色循环移动。 <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实现倒计时和文字滚动的效果实例,包括了JS实现倒计时和文字滚动的效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现倒计时和文字滚动效果的方法。分享给大家供大家参考。具体实现方法如下: 说明:一般我们在一些淘宝类店铺中会看到一些像搞竞拍之类的活动,从中我们时而会发现一些倒计时的效果,在一些年会等场合我们也会发现一些抽奖活动,从中我们也可以看到一些随即滚动的效果

  • 本文向大家介绍javascript实现文字无缝滚动效果,包括了javascript实现文字无缝滚动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下 html js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍JS实现排行榜文字向上滚动轮播效果,包括了JS实现排行榜文字向上滚动轮播效果的使用技巧和注意事项,需要的朋友参考一下 最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播,故根据下面的简单列子修改实现了滚动效果。 效果图(文字向上轮播): demo如下: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现无缝滚动特效,包括了js实现无缝滚动特效的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下 运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1、点开html后,图片自动移动展示 2、点击左右方向,可以改变 图片移动的方向(改变left的值,正负

  • 本文向大家介绍js+div实现文字滚动和图片切换效果代码,包括了js+div实现文字滚动和图片切换效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js+div实现文字滚动和图片切换效果代码。分享给大家供大家参考。具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文

  • 本文向大家介绍jQuery实现的文字hover颜色渐变效果实例,包括了jQuery实现的文字hover颜色渐变效果实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的文字hover颜色渐变效果。分享给大家供大家参考,具体如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技