vue实现循环跑马灯效果,vue跑马灯插件
这篇文章主要为大家详细介绍了某视频剪辑软件编写一个可以快进后退的跑马灯组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件开发实现跑马灯效果组件的具体代码，供大家参考，具体内容如下
用vue编写一个可以快进后退的跑马灯组件
由于业务需求，要实现一个会可以控制速度的跑马灯，初开始用射流研究…的设置时间间隔每隔几毫秒来减取一个字符拼接到后面，效果不理想就放弃了。后查询用射流研究…的有生命的这个美国石油学会(美国石油协会)改造大功告成！
效果图
组件代码
模板
div class= marquee @ mouse over= pause(true) @ mouseleave= pause()
我
字幕-BTN BTN-左El-图标-d-箭头-左
@mousedown=speedUp(true)
@mouseup=speedStop()
/i
div ref= marquee text class= marquee-text
div v-if=itemClick
跨度
v-for= text。拆分(拆分符号)中的项目
:key=item
@click=$emit(itemClickEvent ，item)
{{item 、 }}/span
/div
div v-else{{text}}/div
/div
我
字幕-BTN BTN-右El-图标-d-箭头-右
@mousedown=speedUp()
@mouseup=speedStop()
/i
/div
/模板
脚本
导出默认值{
名称：字幕，
道具：{
文本：{
类型：字符串，
必填：真
},
速度：{
类型：数量，
必选：假，
默认值：110
},
//是否每个都可以点击触发事件
itemClick: {
类型：布尔型，
必选：假，
默认值：错误
},
//每个触发事件元素的分割符号
拆分符号：
类型：字符串，
必选：假，
默认值：""
}
},
data() {
返回{
aniInstance: null，
速度计时器：空
};
},
方法：{
setAnimate() {
常量内容宽度=这个.$参考文献。字幕文本。滚动宽度；
常量关键帧=[
{ transform: translateX(100%) }，
{ transform:` translate x(-$ { content width } px)`}
];
const animateOptions={
时长：(contentWidth/this.speed) * 1000，
迭代次数：无穷大，
缓动："线性"
};
这个。ani实例=文档。查询选择器(.字幕文本)。动画（关键帧、动画选项);
},
/**
* 快进
* @param { Boolean } isLeft是否为左方向
*/
加速(isLeft=false) {
常量集=()={
如果(这个。一个实例。当前时间0){
这个。ani实例。当前时间=这个。ani实例。当前时间(是左？2000 : -2000);
这个。一个实例。当前时间=0(这。一个实例。当前时间=0)；
}
}
//鼠标单击
set()；
//鼠标长按
这个。速度计时器=设置间隔(()={
集合()
}, 100);
},
//快进停止
speedStop() {
清除间隔(这个。速度计时器)；
this.speedTimer=null
},
/**
* 暂停、播放
* @param { Boolean } isPause是否暂停
*/
暂停(isPause=false) {
this.aniInstance[[play ， pause ][Number(isPause)]]()；
}
},
已安装(){
这个. nextTick(()={
这个。set animate()；
});
}
};
/脚本
style lang=less 范围。字幕{
位置：相对；
填充：10px 0；
溢出：隐藏；
宽度：100%;
字体大小：16px
颜色：# fff
背景图像：线性梯度（
向左，
#b9565e，
#cb655a，
#da7655，
#e58a50，
#eb9f4b
);
：悬停marquee-btn {
不透明度：1;
}
}。marquee-btn {
位置：绝对；
top:50%；
transform:平移y(-50%)；
填充：15px
颜色：# fff
背景：rgba(1，1，1，0.4)；
z指数：999;
光标：指针；
不透明度：0;
过渡：全0.2秒线性；
}。BTN-左侧{
左：0;
}。BTN-右{
右：0;
}。字幕文本{
空白：nowrap
跨度{
：悬停{
光标：指针；
颜色：# 2c3e50
}
}
}
/风格
父组件代码
选取框
:text=overdueInfo.content
:itemClick=true
：速度=120
splitSymbol=、
@itemClickEvent=marqueeSearch
class=marquee-box__container
/Marquee
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。