vue横屏显示,vue 滚动显示
这篇文章主要为大家详细介绍了某视频剪辑软件实现横屏滚动公告效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现横屏滚动公告效果的具体代码，供大家参考，具体内容如下
HTML文件
模板
div id=box ref=box
div class= marquee-box ref= marquee @ mouse over= menter @ mouse leave= m leave
p ref=cmdlist id=pWidth
img style= width:12px；高度：12px src=./assets/logo.png alt= 累计练习时长一小时，可以获得一次抽奖机会，奖品有。
/p
/div
/div
/模板
JS文件内容
导出默认值{
名称：“HelloWorld”，
data () {
返回{
值：0,
计时器： ,//计时器
pwidth:0，//公告文本的宽度
窗口宽度：文档。documentelement。客户端宽度，//设备屏幕的宽度
}
},
已安装(){
让元素=这个. refs.cmdlist
这个。pwidth=文档。默认视图。getcomputedstyle(element， )。宽度。拆分( px )；
这个。timer=setInterval(这个。点击命令，20)；
},
观察：{
值（新值，旧值){
设all width=parse int(this。窗口宽度)解析int(this。pwidth[0])；
if(newValue=-allWidth){
这个参考文献。cmd列表。风格。左边距=this。窗口宽度 px ；
这个。值=0；
}
},
},
方法：{
单击推荐(e) {
让这个=这个
这个. nextTick(()={
这个。value-=1；
这个参考文献。cmd列表。风格。左边距=_ this。这个窗口宽度。值“px”；
});
},
menter(){
清除间隔(这个。定时器)；
},
mleave(){
这个。timer=setInterval(这个。点击命令，20)；
},
},
销毁前(){
清除间隔(这个。定时器)；
}
}
CSS样式
样式范围
#框{
宽度：100%;
高度：50px
边距-顶部：50px
位置：相对；
}。字幕框{
位置：相对；
宽度：100%;
身高：100%;
溢出：自动；
背景色：# f8f8f8
}
#pWidth{
宽度：100%;
高度：50px
填充：0;
边距：0;
行高：50px
显示：块；
断字：保留全部；
空白：nowrap
溢出：隐藏；
字体系列：微软雅黑；字号：14px
背景色：#f8f8f8
}
:-网络工具包-滚动条{
宽度：0!重要；
}
:-网络工具包-滚动条{
宽度：0!重要；高度：0;
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。