Question

我目前正在使用此插件：http://richhollis.github.io/vticker/来创建垂直新闻自动收录器。非常好的插件，效果很好，小问题，正如你可以通过我的小提琴演示看到：http://jsfiddle.net/vzb4mv0n/3/如果consoleTextArea.textProperty().bind(Bindings.concat(consoleTextArea.getText()).concat("\n").concat(textRecu.get()));元素的高度大小不同，这会在每个元素之间留下很大的空白，如似乎插件采用了具有最大高度的li元素，并将其分配给所有li元素，这看起来不太好，因为我希望它们彼此齐平，无论如何副本中有多少行，或窗口大小等。

除了我的小提琴链接之外，所有人都在下面找到了必要的代码：
HTML

li

的jQuery

<div id="example">
    <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
        <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</li>
        <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</li>
    </ul>
</div>

CSS

$(function () {
    $('#example').vTicker('init', {
        speed: 600,
        pause: 2000
    });
});


$(document).ready(function () {
    Resize();
});

//Every resize of window
$(window).resize(function () {
    Resize();
});

//Dynamically assign height
function Resize() {
    // Handler for .ready() called.
    var windowHeight = $(window).height(),
        finalHeight = windowHeight + 'px';

    $('#example').css('height', finalHeight);

}

对此有任何建议将不胜感激！

Answer 1

不要使用window.resize，而是使用css中的@media quires来实现它。

例如，如果你想改变你的字体大小，你就有了这个：

#example li {
    font-size: 50px;
}

然后你可以为此更改特定视图：

@media (max-width: 767px) {
  #example li {
    font-size: 20px;
  }
}

或者你喜欢的任何其他风格规则。

使用JS调整大小窗口会对用户的浏览器产生性能问题。

Answer 2

您必须使用ticker插件的以下选项来更改该行为。

$('#example').vTicker('init', {
    speed: 600,
    pause: 2000,
    showItems: 3,
    height: 200
});

showItems和height是您正在寻找的内容。您可以阅读有关选项的更多信息here。

http://jsfiddle.net/spLt312e/

jQuery：响应式垂直滚动条

2 个答案: