JSFiddle - React, Tailwind, and code Playground

by escapedcat

HTML

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style-teaser.css">
  
  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
       Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects; 
       for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ -->
  <!--<script src="js/libs/modernizr-2.0.6.min.js"></script>-->
</head>

<body>
  <header>
    
  </header>
  
  <div role="main">
  
    <div class="container">
        <ul>
            <li>
          <span class="qx">QX89327</span><br />
          <span class="wish">1千万要快乐，千万要健康，千万要幸福。 </span>
            </li>
            <li>
          <span class="qx">qx29089</span><br />
          <span class="wish">2业绩蒸蒸日上 百尺竿头更进一步</span>
        </li>
        <li>
          <span class="qx">qt28929</span><br />
          <span class="wish">3员工精诚团结 携手共进 共创辉煌</span>
       ...

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font: normal 12px '微软雅黑','宋体', Songti宋体, SimSun, Arial, Helvetica, sans-serif;
  color: #000;
}

.container {
  width: 262px;
  height: 380px;
  margin: 2% auto 0;

  border: 1px solid #999;
  
  overflow: hidden;
  
  position: relative;
}

ul {
  float: left;
  padding: 10px 0 0 10px;
}

li {
  float: left;
  display: block;
  
  list-style: none;
  overflow: hidden;
  
  width: 230px;
  height: 54px;
  padding: 5px;
  margin: 0 0 10px;
  
  line-height: 1.2;
  color: #666;
  background: #fff;
  border: 0px solid #999;
  
  position: relative;
}

li span {
  position: absolute;
}

li .qx {
  font-size: 9px;

  bottom: 3px;
  right: 5px;
}

li .wish {
  color: #000;
  width: 90%;
  font-size: 14px;
  top: 3px;
}

JavaScript

var isDisplay = $('body').hasClass('display');

var $list = $('ul'),
    listH = $('ul').height(),
    $items = $('li');

//console.log(listH);

function moveTeaserItems() {
  var elFirst = $list.find('li:first'),
      elLast = $list.find('li:last');
      
      
      elFirst.animate({
               opacity: '0',
               top: '-=74'
             }, 800);
      
      $items.animate({
               top: '-=74'
             }, 1000,
             function() {
               elLast.after(elFirst);
               $(this).css({
                    'top'    : '0',
                    'opacity' : '1'
             });
      });
      
}

var autoInterval;

function startTeaserSlide() {
  autoInterval = setInterval(function() {
          moveTeaserItems();
      }, 5000);
};

$(function() {
  
  if (isDisplay === false) {
    startTeaserSlide();
  }
});