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

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

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

1、网页简单编写：

 <!-- 使用标签属性onload： -->

 <!-- 该属性实现在页面加载时完成内部的相关函数方法：show() 事件-->

 <body onload="show()">

     <!-- 给需要的div命名为word，方便定位元素 -->

     <div id="word">

     </div>

 </body>

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

 <style>

     #word>span{

         opacity: 0;

     }

 </style>

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

3、引入jQuery库：

 <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、以下为主要代码分块描述：

 var str="英雄名称：宫本武藏被动技能：宫本武藏的被动技能为'狩魔'，使宫本武藏" +

         "释放技能将会为下一次普通攻击蓄力，造成额外30（+60%物理加成）点物理" +

         "伤害并减少所有技能1秒冷却时间。";

         // 测试

         // console.log(str[3]);

         // console.log($.isArray(str));  //false

         // 向名为word的div添加指定字数个span标签，方便操作

         for (var i=0; i<str.length; i++){

             // 添加str的长度个span，每一个span里面保存着一个文字

             $("#word").append("<span>" + str[i] + "</span>");

         }

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

 var j = 0;  // 用于计数

 // show()方法的另外一种书写方式

 show = function () {

        // $("#word>span"):jQuery语法，选择器，选中word其中的所有span标签

 6        // eq()：选择元素，返回jQuery对象

        $("#word>span").eq(j).animate({opacity:"1"}, 100);

        j += 1;

        // setTimeout("要做的动作（方法名）", 时间（毫秒）)

        // 这里用到了递归实现

        var t = setTimeout("show()", 100);

        if (j >= str.length){

               clearTimeout(t);  // 清除延时动作，退出递归

        }

 }

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

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

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

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

使用JS与jQuery实现文字逐渐出现特效的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  5. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  6. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  7. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  8. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  9. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

随机推荐

  1. C/S模式下的打印方法

     C/S模式使用润乾报表时有两种打印方法(都使用设计器授权) 1.         使用加密狗打印 这种方式需要使用加密狗,适用于客户端较少时 2.         使用api调用打印方法实现打印 ...

  2. 009_svn配置多仓库与权限控制（Alpha）

    1,配置多仓库 实际项目中,我们会同时开发多个项目,通过SVNserve进行仓库监管,但是监管命令只能同时监管一个文件夹,而不能同时监管多个仓库. 解决方法: 可以通过监管总目录来监管所有仓库 SVN ...

  3. error MSB3552: Resource file "**/*.resx" cannot be found. [/ConsoleApp1.csproj]

    问题场景: 练习在docker下操作netcore,镜像为centos7,安装完netcore sdk 2.2后,执行操作: dotnet new consoledotnet run 出现报错: /u ...

  4. JavaScript大位数相加减

    function arrayAdd(number, addNumber) { var numberArr = number.toString().split(''); var addNumberArr ...

  5. Linux Transparent Huge Pages 对 Oracle 的影响

    1 Transparent Huge Pages 说明 官网上有2篇文章对THP 做了说明: https://access.redhat.com/solutions/46111 https://acc ...

  6. 使用innodb_ruby探查Innodb索引结构

    使用innodb_ruby探查Innodb索引结构 innodb_ruby 是使用 Ruby 编写的 InnoDB 文件格式解析器.innodb_ruby 的目的是暴露一些其他隐藏的 InnoDB 原 ...

  7. [翻译] ZLHistogramAudioPlot

    ZLHistogramAudioPlot A hardware-accelerated audio visualization view using EZAudio, inspired by Audi ...

  8. 一、初识MySQL数据库 二、搭建MySQL数据库（重点） 三、使用MySQL数据库 四、认识MySQL数据库的数据类型 五、操作MySQL数据库的数据（重点）

    一.初识MySQL数据库 ###<1>数据库概述     1. 数据库         长期存储在计算机内的,由组织的可共享的数据集合         存储数据的仓库         文件 ...

  9. tomcat6 集群配置

    1. 概要 web容器在做集群配置时,有3点需要注意: 1.1. 负载均衡配置: 1.2. session共享: 1.3. 若做的是单机集群(多个tomcat安装在同一台机器上),需要注意端口冲突问题 ...

  10. AOP-通知-笔记

    说到AOP肯定会想到切面.通知.切点等等.那什么是通知呢?之前我一直以为我们所说的通知就是我们写在切面中的方法,但是随着AOP认识的加深,现在发现所谓的通知不仅仅是我们写在切面中的方法,通知方法只是通 ...