在鼠标悬停时暂停新闻自动收报机

Pause news ticker on mouseover

本文关键字：收报机 新闻 暂停 鼠标 悬停      更新时间：2023-09-26

我正在处理在这个jsfiddle上找到的新闻自动收报机，但它没有按照我想要的方式工作.问题是：

  1. 当我增加所有div的宽度和高度时.它无法正常工作，最后一个div在新闻的第二个转折的第一个div上重叠。

  2. 主要div 中的新闻div 不是循环的 第一条新闻应该跟在最后一个 .

  3. 它不会在鼠标悬停时暂停。

这是这方面的小提琴这里

<script>
  window.verticalScroller = function ($elem) {
  var top = parseInt($elem.css('top'));
  var temp = - 1 * $('#verticalScroller > div').height();
  if (top < temp) {
    top = $('#verticalScroller').height()
    $elem.css('top', top);
  }
  $elem.animate({
    top: (parseInt(top) - 60)
  }, 600, function () {
    window.verticalScroller($(this))
  });
}
$(document).ready(function () {
  var i = 0;
  $('#verticalScroller > div').each(function () {
    $(this).css('top', i);
    i += 60;
    window.verticalScroller($(this));
  });
});
</script>

我正在应用这个，因为它不需要任何 jquery .如果我使用带有 jquery 和插件的股票代码，则即使不使用冲突方法，以前的 jquery 也不起作用。请帮助我摆脱困境.

更新：

<div id="verticalScroller">
<div style="position: relative;height:200px;width:352px;">1 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">2 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">3 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">4 Lorem ipsum dolor sit</div>
</div>

CSS 更新：

#verticalScroller {
position: absolute;
width:352px;
height: 380px;
border: 1px solid red;
overflow: hidden;
}
#verticalScroller > div {
position:absolute;
width:50px;
height:50px;
border: 1px solid blue;
overflow:hidden;
}

您可以通过以下方式使用条件创建停止：

window.verticalScroller = function ($elem) {
    if (window.stop == false) {
        var top = parseInt($elem.css("top"));
        var temp = -1 * $('#verticalScroller > div').height();
        if (top < temp) {
            top = $('#verticalScroller').height()
            $elem.css("top", top);
        }
        $elem.animate({
            top: (parseInt(top) - 60)
        }, 600, function () {
            window.verticalScroller($(this))
        });
    } else {
        setTimeout(function () {
            window.verticalScroller($elem);
        }, 600);
    }
}

$(document).ready(function () {
    window.stop = false;
    var i = 0;
    $("#verticalScroller > div").each(function () {
        $(this).css("top", i);
        i += 60;
        window.verticalScroller($(this));
    });
    $("#verticalScroller").on('mouseenter', function () {
        window.stop = true;
    });
    $("#verticalScroller").on('mouseleave', function () {
        window.stop = false;
    });
});

工作小提琴

相关文章：