旋转儿童div与文本准时

时间：2018-01-17 19:47:02

标签： jquery html css html5 css-animations

我在每个div中创建了一些带子项的div，每个孩子都填充了垂直定位数字（每个div一个数字），我想垂直旋转它们，每个div都有不同的速度，所以例如我在页面加载此行=＆gt; 00000,00，经过一段时间，例如20秒，我想看到类似这样的东西=＆gt; 02110,15。

我的问题是我不能旋转除第一个之外的其他数字（但也是第一个旋转不好，因为它冻结了一个1但它应该从0旋转到9并且在9回到0和从开始之后）。

出了什么问题？

＆＃13;
＆＃13; 
$(document).ready(function() {

  var number_h = 200,
    offset = number_h - 5,
    spinner_h = 200;

  function spin() {
    $("#one_slot .one").children("div").css("transition", "all 5s ease");
    $("#one_slot .one").children("div").css("transform", "translateY(-" + number_h + "px)");
  }

  spin();

});
＆＃13; 
#content_wrapper {
  background: #693 repeat-x;
  background-size: 135px 100%;
  height: 200px;
  width: 1350px;
}

#one_slot,
#two_slot,
#tri_slot,
#four_slot,
#five_slot,
#six_slot,
#seven_slot,
#eich_slot,
#nine_slot,
#ten_slot {
  border: 1px solid #a50;
  width: 130px;
  height: 200px;
  overflow: hidden;
  float: left;
}

#ten_slot {
  float: right;
}

div>div {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 140px;
  margin-left: 3px;
  text-align: center;
  display: block;
  height: 200px;
}
＆＃13; 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="content_wrapper">
  <div id="one_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="two_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="tri_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="four_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="five_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="six_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="seven_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="eich_slot">,</div>
  <div id="nine_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="ten_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

View on JSFiddle

1 个答案:

答案 0 :(得分：0)

您只需拨打spin()一次。所以它只旋转一次。你需要根据你想要的时间把它放在一个循环中，例如setInterval 

$(document).ready(function() {

  var number_h = 200,
    offset = number_h - 5,
    spinner_h = 200;

  function spin() {
    $("#one_slot .one").children("div").css("transition", "all .5s ease");
    $("#one_slot .one").children("div").css("transform", "translateY(-" + number_h + "px)");
  }

  setInterval(function(){
    
    spin();
    number_h += 200;
    number_h %= 2200;
  }, 500)

});
#content_wrapper {
  background: #693 repeat-x;
  background-size: 135px 100%;
  height: 200px;
  width: 1350px;
}

#one_slot,
#two_slot,
#tri_slot,
#four_slot,
#five_slot,
#six_slot,
#seven_slot,
#eich_slot,
#nine_slot,
#ten_slot {
  border: 1px solid red;
  width: 130px;
  height: 200px;
  overflow: hidden;
  float: left;
}

#ten_slot {
  float: right;
}

div>div {
  font-family: 'Open Sans', sans-serif;
  color: white;
  font-size: 140px;
  margin-left: 3px;
  text-align: center;
  display: block;
  height: 200px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="content_wrapper">
  <div id="one_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="two_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="tri_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="four_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="five_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="six_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="seven_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="eich_slot">,</div>
  <div id="nine_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>
  <div id="ten_slot">
    <div class="one">
      <div>0</div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </div>

</div>

通过任何方式都不完美，但它显示了这个想法

相关问题
最新问题