zoukankan      html  css  js  c++  java
  • 今日头条滚动新闻版块特效

    <!--//新闻头条早报-->

    <div class="heading__container">
    <!-- <h1 class="heading">Fun facts about <span class="bold"><coding></span></h1>-->
    <div class="facts__container">
    <div class="icon">

    <span></span>
    </div>
    <div class="text__container">
    <p class="text"></p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    (function(){
    var iconList = [
    "fa-code",
    "fa-google",
    "fa-child",
    "fa-bug",
    "fa-keyboard-o",
    "fa-headphones",
    "fa-lightbulb-o",
    "fa-mortar-board"
    ];


    var factsList = [
    " 交通强国建设正加速推进第一批试点地区“施工图”陆续浮现。-12月4日",
    "2021年起大气污染重点区域公共领域新增或更新用车全部新能源汽车.-12月4日",
    " 房企积极推货 11月29城市新增供应面积环比涨近四成。-12月4日",
    "山东 甘肃 湖南 河南 江苏 河北等地发布新一轮治超政策。-12月4日",
    " 柳钢防城港基地7.5米大型焦炉烘炉点火。-12月4日",
    " 建龙北满100万吨双高线项目全线投产。-12月4日",
    "山钢莱芜分公司成功开发600兆帕级热轧带肋钢筋-12月4日",

    ];
    function createElement(text, icon){
    var p = document.querySelector(".text");
    p.textContent = text;
    var span = document.querySelector(".icon span");
    span.className = "";
    span.classList.add("fa", icon, "fa-2x", "fa-fw");
    }

    var i = 0;
    var length = factsList.length;
    var delayTime = 5000;

    function nextFact(){
    var fact = factsList[i];
    var icon = iconList[i];

    createElement(fact, icon);

    i++;

    if(i >= length){
    i = 0;
    }
    setTimeout(nextFact, delayTime);
    }
    nextFact();

    })();

    </script>

  • 相关阅读:
    免费的编程中文书籍索引
    整理书签博客和文章
    【De8ug玩docker】-Docker常用命令操作
    Linux中的那些英文缩写和她的含义们
    Docker和DevOps是找工作必备技能
    【De8ug玩docker】-命令行只显示-bash-4.1#
    应该知道的Linux技巧
    阿里云服务器linux(centos)常用命令
    jQuery运维开发之第十七天
    js+dom开发第十六天
  • 原文地址:https://www.cnblogs.com/wensx/p/11984252.html
Copyright © 2011-2022 走看看