javascript文字特效

最新推荐文章于 2024-01-10 23:28:33 发布
最新推荐文章于 2024-01-10 23:28:33 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： javascript 文章标签： javascript

1、简单的文字变色

-------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>简单文字变色</title>
</head>


<body>

<script language ="javascript">
    var colors = new Array("red","blue","brown","yellow","pink","purple");
    var i = 0; 
    function changeFgcolor() {
        document.fgColor = colors[i++];
         if(i == colors.length) {
            i = 0;//这里最开始多写了一个等号，以致不能实现文字颜色的循环变换，记住教训啊！
        }
    }
    setInterval("changeFgcolor()",500);
    window.onload = changeFgcolor;
</script>

<h1>
    简单的文字变色实例
</h1>
</body>

</html>

------------------------------

2、文字变色

------------------------------

<html>

<head>

<title></title>
<script language="javascript">
    var colors = new Array("red","blue","brown","yellow","pink","purple","cc3300","cc00aa","66ffcc");
    var a = 0; 
    var b = 1;
    function changeColor() {
        color = colors[a];
        var str = "<font size = '8' face = '黑体' color = ' " + color + " '><p>javascript中实现文字的颜色变换</p></font>";
        document.all.div1.innerHTML = str;
        
        //实现颜色循环
        a += b;
        if(a > colors.length || a < 0) {//当a小于颜色数组中的第一个元素的索引或大于最后一个元素的索引时，改变b的符号。
            b = -b;
        }
        
        var xx = setTimeout("changeColor()",300);
    }
</script>
</head>

<body onload = "changeColor()">
<div id="div1" align="center"></div>
</div>
</body>

</html>
---------------------------------

3、变换的文字

----------------------------------------------------

<html>
<head>
<title>变换的文字</title>
</head>

<body >
<div id="cc" align="center" style="position: absolute; left: -1; top: 5; width: 1003px; height: 19"></div>
<script language="javascript">
    var words = new Array();
    var colors = new Array("red","blue","brown","pink","purple");
    words[0] = "aaaaaaaaaaaaaaa";
    words[1] = "bbbbbbbbbbbbbbb";
    words[2] = "ccccccccccccccc";
    words[3] = "ddddddddddddddd";
    words[4] = "eeeeeeeeeeeeeee";    
    
    var i = 0; 
   document.all.cc.style.width=document.body.clientWidth;//将层的宽度设为页面工作区的宽度
    
    //自定义函数changeWords(),用于改变层的文字用字体颜色
    function changeWords() {
        if(i == words.length) {
            i = 0; 
        }        //这里开始又多写一个等号！！致使程序怎么都不对！
            //动态替换文字及颜色
      // cc.innerHTML = '<font color = "' + colors[i++] +'", size = "5">' +words[i++]+'</font>';
      //注意 ！不能像上面这样写！！这样的话每次输出文字时i是自加了两次！！
        cc.innerHTML = '<font color = "' + colors[i] +'", size = "10'">' +words[i]+'</font>';
        i++;
        //
        setTimeout("changeWords()",500);
    }
    changeWords();
    
</script>
</body>

</html>
-----------------------------------------------

4、追逐点亮的文字（霓虹灯效果）

<html>

<head>

<title>追逐点亮的文字</title>


<script type="text/javascript">
    var str = "欢迎光临控制后台";
    var sLen = str.length;
    /*
    var ss = str.substring(0,1);//测试下这样截的是几个字符，结果是1，ss的值是‘欢’
    alert(ss);
    alert(ss.length);
    */
    var i = 0;
    function gogo() {
        i++;//i必须在些方法外定义，因为这个函数要被循环调用，而每次调用都要求i的值和上一次不同，所以i不能在些方法内定义。
        i = (i >= sLen)?0:i;
        i = (i < 0)?(sLen-1):i;
        a.innerHTML = str.substring(0,i) + "<font color = '#00FF33'>" + str.substring(i,i+1) +"</font>" + str.substring(i+1,sLen);
    }
    setInterval("gogo()",400);

</script>
</head>

<body>
<div id="a" style="font-size: 40px; color: #78a392"></div>
</body>

</html>
--------------------------

5、萤光文字

-------------------

<html>

<head>

<title></title>

</head>

<body>
<script language="javascript">
    var str = "明日科技图书";
    var divLay = '<div id = "div1" align = "center" style = "width:400px; filter:glow(#cc0022,strength=2); font-size:40px; font-family:Courier New;">'+str+"</div>";
    document.write(divLay);
    
    function change() {
        if(div1.filters.glow.strength == 2) {
            div1.filters.glow.color = "#29e9e6";//设置层中字体的外边框的颜色
            div1.filters.glow.strength = 4;//设置层中字体的外边框的长度
        }
        else {
            div1.filters.glow.color = "#cc0033";
            div1.filters.glow.strength = 2;
        }
    }
    setInterval("change()",200);
</script>
</body>

</html>

hdtrs2010
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript文字特效实例
12-29
在本主题"JavaScript文字特效实例"中，我们将探讨如何利用JavaScript实现各种吸引人的文字动画和效果，以此来提升网站的视觉吸引力和用户体验。 首先，我们要理解JavaScript的基本语法和面向对象特性，这是创建文字...
javascript 文字 跟随 鼠标 特效
10-15
javascript网页编程从入门到精通，实现随机颜色文本跟随鼠标移动。
操作元素之修改样式属性
leechoy
06-12 630
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
js 前端打字特效，类似chatGPT显示效果
最新发布
weixin_35438610的博客
01-10 827
无论是网页设计中吸引眼球的开场白，还是产品介绍时循序渐进的信息展示，甚至是在教育场景下引导学生跟随节奏学习，Typed.js都能游刃有余地应对。Typed.js，这款基于JavaScript开发的文字动画库，以其独特的动态打字效果吸引了众多开发者和设计师的目光。它仿佛赋予了字符生命，让它们以模拟真实打字的方式逐个跃然于屏幕上，为用户带来全新的阅读体验。Typed.js 是一个轻量级的JavaScript库，用于创建打字动画效果。《灵动指尖，让文字舞动起来：探索Typed.js的魔力世界》
JavaScript实现在HTML中的粒子文字特效
汝嫣兮的博客
09-20 6940
JS实现HTML粒子特效，含教程与展示
JS个性Hello文字动画js特效
ICode联盟
12-11 186
JS个性Hello文字动画特效是一款可以用作屏幕保护动画特效。
javascript经典特效---文字特效.rar
03-08
但要注意，过度使用特效可能导致页面加载速度变慢，甚至对部分用户造成困扰，因此合理适度地运用JavaScript文字特效至关重要。同时，确保代码的可维护性和兼容性，使其在不同的浏览器和设备上都能良好运行。
JavaScript实现文字跟随鼠标特效
10-23
主要介绍了JavaScript如何实现文字跟随鼠标特效,d代码简单易操作，感兴趣的朋友可以参考下
JS文字特效
easyboot的专栏
11-21 1975
@{ ViewBag.Title = "资产进入"; //Layout = null; } &lt;script type="text/javascript"&gt; $(function () { }) &lt;/script&gt; &lt;!-- Index --&gt; &lt;div class="content"&gt;
js 特效 html 特效 飘动的漂亮文字
08-23
js 特效 html 特效 飘动的漂亮文字 js 特效 html 特效 飘动的漂亮文字
js文字 生成图片特效
10-24
js文字 生成图片特效
js 特效 html 特效 多种文字效果
06-14
js 特效 html 特效 多种文字效果 js 特效 html 特效 多种文字效果
javascript实现的网页文字跳动特效
09-02
javascript实现的网页文字跳动特效，不错哦
js 特效 html 特效 文字滚动显示
09-03
js 特效 html 特效 文字滚动显示 js 特效 html 特效 文字滚动显示
js文字跳动特效
11-27 921
一.如何让字符串变成 一个个的字体，让我们去控制 1获取字符串内容 2清空字符串内容 3遍历字符串， 然后一个个的切割出来。 4给切割出来的文字添加定位 5把添加好定位的文字，重新赋值到获取的 元素里面。 二.鼠标滑动上去之后， 该怎么去实现 文字的跳动 1 定义一个变量0 2 定义 定时器 3让变量不断的 减少 4改变元素的top == 变量 5当 变量 达到...
JS实现类似打字的特效，JS实现打字效果
weixin_42048853的博客
01-02 1426
JS实现类似打字的特效，JS实现打字效果 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现打字特效</title> <!-- 移动设备 --> <meta name="viewport" content="width=device-width, initial-scale=1, s
javascript文字效果
weixin_34075551的博客
06-04 234
1、逐隐逐现的文字 ====1、以下代码放在一个新建页面的HTML的&lt;body&gt;&lt;/body&gt;区即可：[页面上必须什么都没有] &lt;html&gt; &lt;head&gt; &lt;TITLE&gt;特效&lt;/TITLE&gt; &lt;/head&gt; &lt;script language=javaScrip
[javascript]鼠标点击生成文字特效
qq_39717052的博客
01-16 1592
[javascript]鼠标点击生成文字特效前端实用脚本(鼠标点击生成文字特效)前言旧版本新版本然后如果是你想要的效果下面直接代码补充说明 前端实用脚本(鼠标点击生成文字特效) 你好！ 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅 前言 最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时...
简单的介绍JavaScript（用文字特效）
chenshizhi3966的博客
10-22 440
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值