跑马灯（广播消息轮播组件）

基于vue2的垂直跑马灯（广播消息轮播组件）

npm install vue-marquee

new Vue({
  el: 'body',
  data: function(){
  	return {
  		listData: ['item1', 'item2', 'item3']
  	}
  },
  components: {
    'vue-marquee': Marquee,
    'item': '你的列表item组件'
  },
  templete: `<vue-marquee :duration="600" :interval="2000">
                <item v-for="i in listData" :content="i"></item>
             </vue-marquee>`
});

传入参数

Name	Type	Default	Description
interval	Number	3000	上一次轮播完成到下一次轮播开始的间隔时间，ms
duration	Number	600	轮播过程耗时，ms
direction	String	up	轮播方向,'up'

文档原文：https://www.npmjs.com/package/vue-marquee

注：用vue做出来的滚动时有点卡顿

基于jq的跑马灯（广播消息轮播组件）

1、引入文件

<link rel="stylesheet" href="/css/liMarquee.css">
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.liMarquee.js"></script>

2、HTML

<div class="dowebok">jQuery无缝滚动插件liMarquee</div>

3、JavaScript

$(function(){
    $('.dowebok').liMarquee();
});

传入参数

名称	类型	默认值	说明
direction	字符串	left	滚动方向，可选 left / right / up / down
loop	整数	-1	循环次数，-1 为无限循环
scrolldelay	整数	0	每次重复之前的延迟
scrollamount	整数	50	滚动速度，越大越快
circular	布尔值	true	无缝滚动，如果为 false，则和 marquee 效果一样
drag	布尔值	true	鼠标可拖动
runshort	布尔值	true	内容不足是否滚动
hoverstop	布尔值	true	鼠标悬停暂停
xml	布尔值	false	加载 xml 文件
inverthover	布尔值	false	反向，即默认不滚动，鼠标悬停滚动