基于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>`
});
传入参数
注:用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 |
反向,即默认不滚动,鼠标悬停滚动 |