带图标的文字无限滚动【原创】

页面的head部分先引入font-awesome.4.6.0.css图标字体库和jQuery库，代码如下：

<link rel="stylesheet" type="text/css" href="css/font-awesome.4.6.0.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

然后设置好页面各元素的样式，部分代码如下：

body {
  background-color: #ff5d73;
  padding-bottom: 3em;
}

.heading__container {
  position: relative;
  top: 5em;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  width: 430px;
  height: 165px;
}

.heading {
  position: absolute;
  width: 430px;
  padding-bottom: 10px;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 2.1em;
  font-weight: 500;
  color: #fff;
  text-align: center;
  border-bottom: 1px dashed #fff;
}

.bold {
  display: inline-block;
  line-height: 0.6;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 1.1em;
  font-weight: 300;
  color: #fff838;
}

.facts__container {
  position: absolute;
  bottom: -2em;
  left: 0;
  width: 430px;
  height: 78px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 20px 18px -25px #555;
}

.icon {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  padding: 15px;
  background-color: #12b48c;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow-y: hidden;
}

.fa.fa-code,
.fa.fa-google,
.fa.fa-child,
.fa.fa-mortar-board,
.fa.fa-bug,
.fa.fa-lightbulb-o,
.fa.fa-headphones,
.fa.fa-keyboard-o {
  height: auto;
  color: #fff;
  line-height: 46px;
  -webkit-animation: animateEl 5s infinite;
          animation: animateEl 5s infinite;
}

.fa-2x {
  font-size: 2.5em;
}

.text__container {
  box-sizing: border-box;
  width: 320px;
  height: auto;
  padding: 5px 0;
  position: absolute;
  left: 98px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  overflow-y: hidden;
}

.text {
  margin: 0;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-weight: 400;
  font-size: 1.1em;
  color: #12b48c;
  position: relative;
  -webkit-animation: animateEl 5s infinite;
          animation: animateEl 5s infinite;
}

footer {
  width: 100%;
  height: 50px;
  padding: 1em 0;
  background-color: #ff5d73;
  position: relative;
  top: 10em;
  text-align: center;
}

.footer__text {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-weight: 400;
  font-size: 0.9em;
  color: #fff;
}

.footer__text a {
  text-decoration: none;
  color: #fff838;
}

页面的body部分把图标和滚动文字放置在div容器里，代码如下：

<div class="heading__container">
  <h1 class="heading">翻滚吧！ <span class="bold">&lt;code/&gt;</span></h1>
  <div class="facts__container">
    <div class="icon">
      <span></span>
    </div>
    <div class="text__container">
      <p class="text"></p>
    </div>
  </div>
</div>

页面的底部通过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 = [
      "想学编程永远不会太迟。",
      "学编程时，百度和谷歌都是你的好朋友。",
      "修复了一个错误，整个人感觉棒极了。",
      "有时候，代码中可能有很多错误。",
      "学编程可能从爱好变成职业。",
      "即使在做其他事也可能想着代码。",
      "编程培养了创造性思维，不容小觑哦。",
      "推陈出新，编程是个终生学习的过程。"
    ];

  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();
})();