• 多学科构建“大介入” 中国介入医师年会南京召开 2019-04-18
  • 明星高考奇葩事杨幂总分第一 赵薇丢准考证(组图) 2019-04-12
  • 西北大学新传院与西部网签约 开启校媒合作新模式 2019-04-12
  • 《习近平新闻思想讲义(2018年版)》出版发行 2019-04-07
  • 光明日报副总编辑沈卫星 2019-04-07
  • 5月一二三线城市房价环比都涨了,后续会咋样? 2019-04-06
  • 湖州吴兴:打造智慧健康养老“吴兴模式” 2019-04-06
  • 陕西卫计委党组书记胡志强被查,系山西省委原书记胡富国长子 2019-03-31
  • 荆楚网企业法人营业执照 2019-03-27
  • 江西吉安永丰县:芒种农忙(图) 2019-03-27
  • 智媒云图(Intell Vision):图书馆“书童” 2019-03-24
  • 北京:构筑“三维”立体防护网 保险业对非法集资说“NO” 2019-03-17
  • 800万尾鱼苗放流天津蓟州于桥水库 2019-03-17
  • 推动第三代杂交水稻研究 2019-03-06
  • 奇闻怪事:瑶族怪异风俗习惯之烟袋定情 2019-03-06
  • 中国最贵刀: 冰球打架视频

    北京 切换校区

    全国24小时免费热线

    400-009-1906

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

    时间:2019-03-14   来源:尚学堂   阅读:96

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

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

    需要的知识点】:JS中利用Timing中的两个静态方法setTimeout()和clearTimeout()实现(详细参考://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

    网址://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基础班,免费试学三周

  • 多学科构建“大介入” 中国介入医师年会南京召开 2019-04-18
  • 明星高考奇葩事杨幂总分第一 赵薇丢准考证(组图) 2019-04-12
  • 西北大学新传院与西部网签约 开启校媒合作新模式 2019-04-12
  • 《习近平新闻思想讲义(2018年版)》出版发行 2019-04-07
  • 光明日报副总编辑沈卫星 2019-04-07
  • 5月一二三线城市房价环比都涨了,后续会咋样? 2019-04-06
  • 湖州吴兴:打造智慧健康养老“吴兴模式” 2019-04-06
  • 陕西卫计委党组书记胡志强被查,系山西省委原书记胡富国长子 2019-03-31
  • 荆楚网企业法人营业执照 2019-03-27
  • 江西吉安永丰县:芒种农忙(图) 2019-03-27
  • 智媒云图(Intell Vision):图书馆“书童” 2019-03-24
  • 北京:构筑“三维”立体防护网 保险业对非法集资说“NO” 2019-03-17
  • 800万尾鱼苗放流天津蓟州于桥水库 2019-03-17
  • 推动第三代杂交水稻研究 2019-03-06
  • 奇闻怪事:瑶族怪异风俗习惯之烟袋定情 2019-03-06
  • 市福彩中心五一放假吗 11选五5开奖结果江苏爱彩乐 今晚p3开机号是多少 极速时时彩计划软件手机版 超级大乐透走势图2012 pk10最牛6码定位方法 pk10软件平刷王 中国体彩网手机版 qq斗牛欢乐豆 排列五开奖结果 360时时彩 竟彩足比分直播新浪爱彩 混合过关奖金如何计算 买nba让分胜负 重庆时时彩360奖结果 腾讯分分彩的漏洞