在鼠标悬停时冻结滚动文本

时间:2018-08-09 14:52:55

标签: javascript jquery html css

我想在悬停时冻结动画。

这是代码:

jQuery(document).ready(function($) {
  var promoticker = function() {
    var window_width = window.innerWidth;
    var speed = 22 * window_width;
    $('#promo-notifications li:first').animate({
      left: '-980px'
    }, speed, 'linear', function() {
      $(this).detach().appendTo('#promo-notifications ul').css('left', "100%");
      promoticker();
    });
  };
  if ($("#promo-notifications li").length > 1) {
    promoticker();
  }
});
#promo-notifications li {
  position: absolute;
  border: 1px solid red;
  padding:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="promo-notifications">
  <ul>
    <li>
      <div class="bs-shortcode-alert alert alert-info" style="margin-bottom: 0px;"><strong>HELLO!</strong> I am alert :)</div>
    </li>
    <li>
      <div class="bs-shortcode-alert alert alert-info" style="margin-bottom: 0px;"><strong>HELLO!</strong> I am alert :)</div>
    </li>
  </ul>
</div>

只需在鼠标悬停时停止动画。

0 个答案:

没有答案