滚动新闻提要与 div 重叠

我想在我构建的小应用程序中添加一个滚动新闻提要，但是到目前为止我看到的所有脚本或插件都是用于水平滚动的 - 而我想垂直滚动。

我遇到了一个关于这个小提琴的问题，http://jsfiddle.net/rNXs9/1/，这对我来说很有效。我会将每个新闻项加载到div 中，然后让它滚动。

我试图实现这一点，但 DIF 重叠并变得不可读。https://jsfiddle.net/wgyxo8gv/，请看我的小提琴。

我对JS或CSS不是很精通，所以我不太确定是什么原因导致这种情况发生，因此如何解决它。

以下是滚动项目的 JS：

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

以及每个 DIV 的 CSS：

#verticalScroller {
    position: absolute;
    width:400px;
    height: 500px;
    border: 1px solid red;
    overflow: hidden;
}
#verticalScroller > div{
    position:absolute;
    width:380px;
    padding-left:10px;
    height:auto;
    border: dotted white;
    overflow:hidden;
}

如果有人能指出我如何让div 一个接一个地滚动而不重叠，那就太好了。或者，如果有一个插件可以垂直工作而不是水平工作，那么它也可以工作 - 我对垂直滚动的所有搜索都会返回无休止的分页脚本。

我从一个稍微不同的角度解决这个问题。

我没有使用divs，而是使用了一个删除了默认样式的列表，并创建了一个自动收报机函数，该函数每 5 秒向上滑动一次列表项 - 效果不是完全连续滚动，但它向上滑动新闻项，暂停以阅读它，然后继续：

function tick(){
    $('#ticker li:first').slideUp( function ()
    (this).appendTo($('#ticker')).slideDown(); });
}
$(document).ready(function() {
  setInterval(function(){ tick() }, 5000);
});

小提琴

如果你已经在找 adapt 你的第一个代码，你可以这样做。

$(document).ready(function() {
	
  var i = 0;
  var totalHeight = 0;
  $("#verticalScroller > div").each(function () {
     $(this).css("top", i);
     i += $(this).height();
     totalHeight = totalHeight + $(this).height();
  });
  
  var loop = setInterval(function(){ verticalScroller() }, 2000);
  
  var index = 0;
  function verticalScroller() {
     var $currentChild = $("#verticalScroller > div").eq(index);
     var scroll = $currentChild.height();
    
     $("#verticalScroller > div").animate({ top: "-="+scroll }, 600, function() {
        var top = totalHeight - $currentChild.height();
    	$currentChild.css({ top : top});
     });
    
     if(index == $("#verticalScroller > div").length-1) index = 0;
     else index++;
  }
  
});

#verticalScroller {
    position: absolute;
    width:400px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
    background: silver;
}
#verticalScroller > div{
    position:absolute;
    width:380px;
    padding: 0 10px;
    height:auto;
    border-bottom: dotted white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="verticalScroller">
<div>
Nude cyclist Nick Lowe identified as mystery rider in leopard G-string
<br>
A nude cyclist who caused a thong and dance in Marlborough has been exposed &acirc;&#128;&#147; he&#039;s Lower Hutt naturist Nick Lowe.
</div>
<div>
Josh Hazlewood pleads guilty to dissent after appeal rejected
<br>
Australian pace bowler Josh Hazlewood has pleaded guilty to dissent after reacting angrily when Black Cap Kane Williamson survived a contentious appeal and DRS review in the second test at Hagley Oval.
</div>
<div>
Firefighters attending increasing number of non-fire related and bizarre callouts
<br>
Rescuing ducklings stuck in drains, requests to fill water tanks and helping fellow firefighters&#039; pet cockatoos - it&#039;s all part of the job for the fire service these days.
</div>
<div>
Mike Hosking gives his two cents on parenting
<br>
Mike Hosking thinks Kiwi teenagers have an &quot;inflated sense of entitlement.&quot;
</div>
<div>
Australia cruising towards series victory after Black Caps&#039; fight not enough
<br>
It&#039;s free entry at Hagley Oval and sadly too familiar for New Zealand against Australia on the final day of the test cricket summer.
</div>
<div>
Big fire strikes near Melbourne
<br>
A major bushfire is burning in the Melbourne area, with emergency services telling some residents it&#039;s too late to flee.
</div>
<div>
Smalltown GP offers $400k job and a slice of the business after struggling to recruit
<br>
A smalltown rural GP in the North Island is offering $400,000 to a junior doctor after a fruitless two-year search for staff.
</div>
<div>
Auckland Zoo&#039;s baby red pandas give warm fuzzies at weigh-in
<br>
Baby red panda twins at Auckland Zoo in Western Springs have had their first weigh-in and are cuter than ever.
</div>
<div>
Max Key reads ruthless messages directed at him
<br>
Max Key read out a list of mean social media posts with a smile on his face, even though he was the butt of every joke.
</div>
</div>

更改以下 jquery 函数：

$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function () {
      $(this).css("top", i);
      i += $(this).height(); // CHANGE THIS
      window.verticalScroller($(this));
  });
});

结果：jsfiddle

当您为每个div设置顶部时，您不知道每个div与顶部的距离，因为它们没有固定的高度。要设置正确的顶部，您必须考虑每个div的实际高度，这就是为什么您必须将行更改为 i += $(this).height(); 。

如果需要，您可以添加上瘾的固定像素量，以在div之间添加一些空白：i += $(this).height() + 10;。

相关内容

最新更新

热门标签：