jquery.vticker.js踩坑屏幕大小变化适应屏幕

vTicker – jQuery垂直滚动插件

vTicker 是一款非常小巧的 jQuery 垂直滚动插件，压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向（向上/向下）、容器高度等等，但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话，vTicker 仍然是一个很好的选择，毕竟它是如此的小巧方便。

使用方法

1、引入文件

插件下载链接：注意链接打开以后直接保存页面就是对应的js文件

<script src="http://richhollis.github.com/vticker/downloads/jquery.vticker.js?v=1.15"></script>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.vticker.js"></script>

2、HTML

<div class="data-list">
    <ul>
        <li>1、新闻标题</li>
        <li>2、新闻标题</li>
        <li>3、新闻标题</li>
        <li>4、新闻标题</li>
        <li>5、新闻标题</li>
        <li>6、新闻标题</li>
        <li>7、新闻标题</li>
        <li>8、新闻标题</li>
    </ul>
</div>

3、js

let timer = null;
timer = setTimeout(() => {
    clearTimeout(timer);
    $('.data-list').vTicker({
        speed: 1000,           //滚动速度，单位毫秒。
        pause: 1000,            //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
        showItems: 6,           //显示内容的条数。
        mousePause: true,       //鼠标移动到内容上是否暂停滚动，默认为true。
        height: 0,              //滚动内容的高度。
        direction: 'up',       //滚动的方向，默认为up向上，down则为向下滚动。
        animation: 'fade',    //动画效果，默认是fade，淡出。
        mousePause: true      //鼠标移动到内容上是否暂停滚动，默认为true。
    });
},1200)

踩坑

在屏幕大小变化以后，每条li的height还是之前的大小，不会动态变化，解决方法如下：

解决：css
/*实施数据轮播*/
.data-list{
    /*height: 100%;*/
    height: 100% !important;
    width:94%;
    margin: 0 auto;
}
重点：在于ul的高度要按照百分比自适应，要加！important