北京 切换校区

全国24小时免费热线

400-009-1906

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

时间:2019-03-14   来源:尚学堂   阅读:46
首页> 使用JS与jQuery实现文字逐渐出现特效

该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现。于是便开始尝试利用最近正在学习的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样式表,这里只列出主要的样式:

1 <style>
2     #word>span{
3         opacity: 0;
4     }
5 </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标签
       // 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),第二个参数实现效果作用时间。

相关资讯

  • 北京校区
  • 山西校区
  • 郑州校区
  • 武汉校区
  • 四川校区
  • 长沙校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办

北京海淀区校区(总部):北京市海淀区西三旗街道建材城西路中腾建华商务大厦东侧二层尚学堂
北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE培训大数据就业班培训大数据云计算周末班培训零基础大数据连读班培训大数据云计算高手班培训人工智能周末班培训人工智能+Python全栈培训H5+PHP全栈工程师培训

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702

郑州学区地址:河南电子商务产业园6号楼4层407
咨询电话:0371-55177956

武汉学区地址:湖北省武汉市江夏区江夏大道26号 宏信悦谷创业园4楼
咨询电话:027-87989193

四川学区地址:成都市高新区锦晖西一街99号布鲁明顿大厦2栋1003室
咨询电话:028-65176856 / 13880900114

网址:http://www.cssxt.com/
咨询电话:0731-83072091

深圳校区地址:深圳市宝安区航城街道航城大道航城创新创业园A4栋210(固戍地铁站C出口)
咨询电话:0755-23061965 / 18898413781

上海尚学堂松江校区地址:上海市松江区荣乐东路2369弄45号绿地伯顿大厦2层
咨询电话:021-67690939

广州校区地址:广州市天河区元岗横路31号慧通产业广场B区B1栋6楼尚学堂(地铁3号线或6号线到“天河客运站”D出口,右拐直走约800米)
咨询电话:020-2989 6995

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

Copyright 2006-2019 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
媒体联系:18610174079 闫老师  

Java基础班,免费试学三周