欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

使用JS与jQuery实现文字逐渐出现特效

程序员文章站 2022-05-18 23:18:17
该需求出现原因：想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果，且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现。于是便开始尝试利用最近正在学习的jQuery技术和JS实现。 【注】：该篇文章适合初学者阅读，大佬请跳过。 【需要的知识点】：JS中利用Timing中的两个 ......

该需求出现原因：想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果，且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现。于是便开始尝试利用最近正在学习的jquery技术和js实现。

【注】：该篇文章适合初学者阅读，大佬请跳过。

【需要的知识点】：js中利用timing中的两个静态方法settimeout()和cleartimeout()实现（详细参考：http://www.w3school.com.cn/js/js_timing.asp），同时使用了一个递归小方法。

1、网页简单编写：

 

 1 <!-- 使用标签属性onload： -->
 2 <!-- 该属性实现在页面加载时完成内部的相关函数方法：show() 事件-->
 3 
 4 <body onload="show()">
 5 
 6     <!-- 给需要的div命名为word，方便定位元素 -->
 7     <div id="word">
 8 
 9     </div>
10 </body>

 

2、编写相关的css样式表，这里只列出主要的样式：

1 <style>
2     #word>span{
3         opacity: 0;
4     }
5 </style>

该处的opacity:0实现使word下面的所有span标签中的字体变为透明色。

3、引入jquery库：

1 <script src="jquery-1.12.4.js"></script>

这里使用1.x版本的最后一版1.12.4版，大家可以在线百度jquery引入在线版。我这里是在本地就有一个jquery文档了，所以可以直接引入。

4、编写相关的jquery入口函数：

<script language="javascript" type="text/javascript">
        $(function () { //jquery的入口函数

              // 编写相关的jquery代码与js代码...

        });
</script>

5、以下为主要代码分块描述：

 

 

 1 var str="英雄名称：宫本武藏被动技能：宫本武藏的被动技能为'狩魔'，使宫本武藏" +
 2         "释放技能将会为下一次普通攻击蓄力，造成额外30（+60%物理加成）点物理" +
 3         "伤害并减少所有技能1秒冷却时间。";
 4         // 测试
 5         // console.log(str[3]);
 6         // console.log($.isarray(str));  //false
 7 
 8         // 向名为word的div添加指定字数个span标签，方便操作
 9         for (var i=0; i<str.length; i++){
10             // 添加str的长度个span，每一个span里面保存着一个文字
11             $("#word").append("<span>" + str[i] + "</span>");
12         }

 

这里是用于预先将每一个文字添加进span标签，当然使用div也可以不过这里使用span标签是因为它是inline元素，不用转换类型。str是一个字符串，但是在进行isarray()判断后可以看出其并不是数组，应该是一个伪数组，但依然可以使用str[i]取其中的单个文字。

 1 var j = 0;  // 用于计数
 2 
 3 // show()方法的另外一种书写方式
 4 show = function () {
 5        // $("#word>span"):jquery语法，选择器，选中word其中的所有span标签
 6        // eq()：选择元素，返回jquery对象
 7        $("#word>span").eq(j).animate({opacity:"1"}, 100);
 8        j += 1;
 9        // settimeout("要做的动作（方法名）", 时间（毫秒）)
10        // 这里用到了递归实现
11        var t = settimeout("show()", 100);
12        if (j >= str.length){
13               cleartimeout(t);  // 清除延时动作，退出递归
14        }
15 }

settimeout()和cleartimeout()可以自行去w3school查看，这里不赘余描述。

在settimeout这里使用递归实现文字的逐渐显示，在完成前一个动画的实现后才会继续下一层递归的方法动画实现。

$("#word>span");是jquery语法，相当于css中的选择器。

eq()方法用于返回专门的jquery对象，animate()实现动画效果：第一个是实现透明度的恢复（取值0-1），第二个参数实现效果作用时间。

 

上一篇： .Net Core 在Linux服务器下部署程序--(2). 部署前需要安装的软件及SDK

下一篇： MySQL大表优化方案

推荐阅读