
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’