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>

  • 相关阅读:
    数组、向量、矩阵的区别
    vue-cli3没有config.js文件的解决方法
    通用JS六
    通用JS五
    通用JS四
    通用JS三
    vue中sort排序与revers数据反序
    通用JS二
    VueX存储与本地存储以及会话存储的区别
    通用JS(一)
  • 原文地址:https://www.cnblogs.com/wensx/p/11984252.html
Copyright © 2011-2022 走看看