• 财政部就“财税改革和财政工作”答问 2019-06-21
  • 后伊布时代 北欧海盗能否再扮演“豪门杀手” 2019-06-10
  • 中国宗教研究学者:儒道佛三教关系为世界宗教发展提供新启迪 2019-06-10
  • “六一”特刊丨尤叔叔的安(xìng)全(fú)小课堂 2019-06-05
  • 微信“信用卡还款”3.0版本上线 支持招商银行账单查询 2019-05-30
  • 上海发布来沪人员就业报告 2019-05-30
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-24
  • 杭州约谈58同城等3家网上房源发布平台负责人 2019-05-24
  • 《典出山西》考试季特辑:“武状元”那些事 2019-05-22
  • 首趟中欧班列整车进口专列抵达西安 2019-05-22
  • 航旅纵横疑似泄露隐私,企业应管好用户信息 2019-05-18
  • 美国防部宣布暂停8月美韩联合军演 2019-05-17
  • 党媒《红网湘乡手机报》是如何做到接地气、聚人气的? 2019-05-17
  • 刘嘉玲:长江后浪一直涌来 2019-05-16
  • 营养-热门标签-华商生活 2019-05-16
  • nhl球队:

    北京 切换校区

    全国24小时免费热线

    400-009-1906

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

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

    该需求出现原因:想要实现一个在一开始加载页面时就出现一行文字逐渐出现的效果,且需要实现的是一种逐渐的过渡出现效果为不是一种生硬的突然间歇性出现。于是便开始尝试利用最近正在学习的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+数据分析+机器学习??人工智能+模式识别+强化学习???WEB前端+移动端+服务端渲染

     

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

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

    武汉学区地址:武汉市东湖高新区光谷金融港B22栋11楼
    咨询电话: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-06-21
  • 后伊布时代 北欧海盗能否再扮演“豪门杀手” 2019-06-10
  • 中国宗教研究学者:儒道佛三教关系为世界宗教发展提供新启迪 2019-06-10
  • “六一”特刊丨尤叔叔的安(xìng)全(fú)小课堂 2019-06-05
  • 微信“信用卡还款”3.0版本上线 支持招商银行账单查询 2019-05-30
  • 上海发布来沪人员就业报告 2019-05-30
  • 新华时评:美逆潮流而动,必将付出代价 2019-05-24
  • 杭州约谈58同城等3家网上房源发布平台负责人 2019-05-24
  • 《典出山西》考试季特辑:“武状元”那些事 2019-05-22
  • 首趟中欧班列整车进口专列抵达西安 2019-05-22
  • 航旅纵横疑似泄露隐私,企业应管好用户信息 2019-05-18
  • 美国防部宣布暂停8月美韩联合军演 2019-05-17
  • 党媒《红网湘乡手机报》是如何做到接地气、聚人气的? 2019-05-17
  • 刘嘉玲:长江后浪一直涌来 2019-05-16
  • 营养-热门标签-华商生活 2019-05-16
  • 天津时时彩历史号码 3大主机游戏平台 11067期14场胜负彩 天涯明月刀职业 呼噜噜爱上乡下游戏 双色球蓝球谜语汇总 深圳风采中奖计算 天津时时彩彩组三 十二生肖守护神 mg电子放水规律 使命召唤ol停运公告 湛蓝深海闯关 北京28官方开奖 青海快三昨天开奖结果查询 下载pk10计划软件苹果 龙之谷手游开服时间表