使用vticker.js实现新闻内容垂直滚动效果
  • 分享到微信朋友圈
    X

vTicker.js是一款小巧的 jQuery 垂直滚动插件,压缩后只有 2KB。vTicker支持多种属性选项,vTicker.js几乎可以兼容所有的浏览器, vTicker.js支持向上或者向下滚动,每次滚动一条数据,并且不会出现显示错位,因为它会计算一条数据的高度。它的滚动内容不仅仅是文字,也支持图片滚动。

如何实现

使用vticker.js实现新闻内容垂直滚动效果你首先需要引用jquery,js和vTicker.js,滚动内容标签你可以使用无序列表你也可以使用其他的标签,vTicker支持多种属性选项包含 滚动速度,滚动间隔,动画效果,向上或者向下滚动和显示内容的条数。

关键js代码与解析

<script> 
    $(function(){
        $('#news').vTicker({
            speed: 700, //滚动速度,单位毫秒。
            pause: 1500,//滚动间隔,就是滚动一条之后停留的时间,单位毫秒。
            animation: 'fade',//动画效果,默认是fade,淡出。
            mousePause: true,//鼠标移动到内容上是否暂停滚动,默认为true。
            showItems: 3,//显示内容的条数。   
        }); 
    });  
</script>

参数说明

  • speed: 700, //滚动速度,单位毫秒。

  • pause: 1500,//滚动间隔,就是滚动一条之后停留的时间,单位毫秒。

  • animation: 'fade',//动画效果,默认是fade,淡出。

  • mousePause: true,//鼠标移动到内容上是否暂停滚动,默认为true。

  • showItems: 3,//显示内容的条数。

  • height:235, //滚动内容的高度。

  • isPaused:false,//布尔值 false 默认是否暂停

  • direction:"down", //字符串 ‘up’ 滚动方向,可选 ‘up’ / ‘down’