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>

赞 (0)

相关推荐

  • JS小功能(列表页面隔行变色)简单实现

    JS小功能(列表页面隔行变色)简单实现

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <script type="text/javascript">        window.onload = function () {            var otab = document.getElementById('tab1');            var thiscolor

  • js实现鼠标经过表格行变色的方法

    本文实例讲述了js实现鼠标经过表格行变色的方法.分享给大家供大家参考.具体实现方法如下: <script type=text/javascript> <!-- (function(){ var rows = document.getElementById("listdata"); var add = function(){ this.style.backgroundColor="#f3f3f1"; }; var del = function(){

  • js实现选中复选框文字变色的方法

    js实现选中复选框文字变色的方法

    本文实例讲述了js实现选中复选框文字变色的方法.分享给大家供大家参考.具体如下: 这里实现选中复选框时,文字加上一个背景色,变通一下,还是很有用的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-cha-font-color-codes/ 具体代码如下: <html> <head> <title>选中复选框文字变色</title> <style> .checkbox {

  • 用JS控制表格的逐行变色的表单

    优点: 1.代码干净,无冗余标签. 2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.) 3.用JS控制表格的逐行变色 4.支持选中项高亮 5.支持checkbox的全选/取消功能 6.分页标签已经做好,没有做后台代码(以后有时间更新) 7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器 友好度良好的表格 *{font-family:Tahoma, Arial, Helvetica, Sans-serif,"宋体";}

  • JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法.分享给大家供大家参考.具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效. 运行效果如下图所示: 具体代码如下: <html> <head> <title>点击复选框按钮变为不可用</title> </head> <script> var

  • 纯js和css实现渐变色包括静态渐变和动态渐变

    纯js和css实现渐变色包括静态渐变和动态渐变

    说起"渐变色",你会想起什么? 当我开始搜索查找这个名词的时候,才发现它实际上是有两种理解或者说是两种形式的:动态渐变和静态渐变. 所谓动态渐变,举个简单的例子:他来了,她的脸渐渐红了...渐渐的,渐渐改变的,是不断在改变的:而静态渐变,也就更简单了:天上一到彩虹,赤橙黄绿青蓝紫啊...在当前展示的成品中,颜色从一部分到另一部分的颜色是不一样的,可能幅度比较小,是逐渐改变的,但有一点是至关重要的,它已经存在了,形成了变化的现状且无法再改变. 这样我们先来用javascript实现一下所

  • jQuery隔行变色与普通JS写法的对比

    复制代码 代码如下: <style type="text/css"> body { font-size:12px;text-align:center; } #tbStu { width:260px;border:1px solid #666;background-color:#eee; } #tbStu tr { line-height:23px; } #tbStu tr th { background-color:#ccc;color:#fff; } #tbStu .tr

  • JS实现统计复选框选中个数并提示确定与取消的方法

    本文实例讲述了JS实现统计复选框选中个数并提示确定与取消的方法.分享给大家供大家参考.具体实现方法如下: javascript部分如下: <script type="text/javascript"> function yesno() { var inputs = document.getElementsByName("ck[]"); var checked_counts = 0; for(var i=0;i<inputs.length;i++){

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • JS关键字变色实现思路及代码

    1.替换关键字,对字体变色 复制代码 代码如下: public static string ReplaceRed(string strtitle, string redkey) { if (redkey == "" || redkey == null) { return strtitle; } else strtitle = strtitle.Replace(redkey, " <font color='#ff0000'>" + redkey + &qu

  • JS实现CheckBox复选框全选全不选功能

    CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo

随机推荐