好资源导航 » 文章资讯 » vue实现文字横向无缝走马灯组件效果的实例代码

vue实现文字横向无缝走马灯组件效果的实例代码

2023-08-24 20:08:06 76

marquee标签已经废弃了，只能手动实现文字走马灯样式

基于vue组件开发




//限制外框宽度，隐藏多余的部分
.wrap{
overflow:hidden;
}
//移动框宽度设置
#box{
width:80000%;
}
//文字一行显示
#boxdiv{
float:left;
}
//设置前后间隔
#marquee{
margin:016px00;
}
//获取宽度的节点，隐藏掉
#node{
position:absolute;
z-index:-999;
top:-999999px;
}

父组件引入importmyMarqueefrom'./my-marquee

使用并传参：

参数：

data(){
return{
lists:[
'连雨不知春去',
'一晴方觉夏深'
]
}
}

总结

以上所述是小编给大家介绍的vue实现文字横向无缝走马灯组件效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

返回顶部
514930285
czq8825@qq.com

vue实现文字横向无缝走马灯组件效果的实例代码

热门推荐

随机推荐