像歌词跟着声音走的JS文字效果

  • 一个比较不错的文字显示特效,像MTV的歌词显示一样跟着演唱者慢慢逐个清淅显示,这段特效代码就实现了和这个功能差不多,而且JS代码非常少,兼容性好,点击运行看看效果吧!
<html>
<head>
<title>石家庄花卉</title>
</head>
<body>
<script language="JavaScript">
var message="像歌词显示一样JS文字效果!"
var neonbasecolor="gray"
var neontextcolor="blue"
var flashspeed=100
var n=0
if (document.all){
document.write(‘<font size="3" color="‘+neonbasecolor+‘">‘)
for (m=0;m<message.length;m++)
document.write(‘<span id="neonlight">‘+message.charAt(m)+‘</span>‘)
document.write(‘‘)
var tempref=document.all.neonlight
}
else
document.write(message)
function neon(){
if (n==0){
for (m=0;m<message.length;m++)
tempref[m].style.color=neonbasecolor
}
tempref[n].style.color=neontextcolor
if (n<tempref.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}
function beginneon(){
if (document.all)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>
</body>
</html>

像歌词跟着声音走的JS文字效果

时间: 2024-08-04 06:41:19

像歌词跟着声音走的JS文字效果的相关文章

JQ图片跟着鼠标走

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title></title> <scr

HTML JS文字闪烁实现(项目top.htm分析)

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <!-- saved from url=(0033)https://192.168.1.2/topframe6.htm --> 3 <HTML><HEAD><TITLE>topframe</TITLE> 4 <META http-equiv=Content-Type conte

总有一种声音(图片、文字……),让我们泪流满面

(1)李开复微博推荐的[感恩视频:爱人如己](4分钟) (2)新东方"相信未来"演讲-李开复(60分钟),演讲稿,2011   以及提到的电影<圣诞颂歌>(95分钟) (3)新东方"相信未来"演讲-俞敏洪(40分钟),2011 (4)史蒂夫·乔布斯在2005年斯坦福大学毕业典礼演讲(15分钟,中文字幕),2005 (5)俞敏洪一分钟励志演讲(1.5分钟) 总有一种声音(图片.文字--),让我们泪流满面,布布扣,bubuko.com

js文字颜色闪烁

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS+ajax制作新浪微博文字效果

JS+ajax制作新浪微博文字效果,新浪微博效果,文字淡入效果.JS代码 下载地址:http://www.huiyi8.com/sc/6426.html(转载请注明此处)

Js对角线收缩,渐隐文字效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

移动互联网的未来:金钱跟着眼球走

昨天阅读了美国网络媒体BusinessInsider近日发布的报告<移动互联网的未来>,感觉很爽,可能是因为自已就是搞这一行业的,所以越看越兴趣,未来太多太多的机会,太多太多的可能性,那该死的智能手机加上该死的APP应用将慢慢地完全融入你生活和商务的方方面面,聪明的创业者们瞄准的是细分行业的市场,行业大佬类似马化腾和马云尽管钱包鼓涨野心澎涨,但也不可能面面俱到,还是要留一些空间给市场上的小弟们,否则他们不是累死就是被整死了,虽然政府爱他们多于恨他们,但聪明的领导者知道,任何行业垄断都是不利于稳

CSS立体文字效果最佳实践

上一篇的<纯CSS3文字效果推荐>文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,今天来补充下,顺便领略sass的强大功能,请大家摩摩拳擦擦掌,开工咯! 案例效果还是在codepen,在线研究点这里,下载收藏点这里. 1.单单纯纯的效果一 为了简化操作,我们使用和上一篇文章<纯CSS3文字效果推荐>一样的文档结构,后面的效果大差小不差,也就不再列出. <div contenteditable

精通CSS+DIV网页样式与布局--CSS文字效果

上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图: 接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例. 文字的字体 在CSS中,我们采用了font-family来控制文字的字体,接着,我们来看一