2024年Web前端最新vue实现歌词滚动_vue 实现一个歌词滚动效果(1),熬夜整理最全面的HTML字符实体

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。


通过以上处理得到一个新的数据 ,数据具体格式如下:

二、获取当前播放时间

 <audio :src="music" @timeupdate="audioTime" controls></audio>

音频播放控件有个事件   @timeupdate事件可以实时反馈当前播放进度信息,封装audioTime函数,具体代码如下:

  audioTime(e) {
      var time = e.target.currentTime; //当前播
  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Vue 组件实现文字横向无缝走马灯效果的实例代码: ```vue <template> <div class="marquee"> <div class="marquee-inner" ref="marquee"> <slot></slot> <slot></slot> </div> </div> </template> <script> export default { name: 'Marquee', data() { return { animationId: null, speed: 1, offset: 0, innerWidth: 0, marqueeWidth: 0 } }, mounted() { this.startAnimation() }, beforeDestroy() { this.stopAnimation() }, methods: { startAnimation() { this.animationId = requestAnimationFrame(this.animate.bind(this)) }, stopAnimation() { cancelAnimationFrame(this.animationId) }, animate() { this.offset -= this.speed if (this.offset < -this.marqueeWidth) { this.offset = 0 } this.$refs.marquee.style.transform = `translateX(${this.offset}px)` this.animationId = requestAnimationFrame(this.animate.bind(this)) }, updateDimensions() { this.innerWidth = this.$refs.marquee.clientWidth this.marqueeWidth = this.$refs.marquee.scrollWidth } }, mounted() { window.addEventListener('resize', this.updateDimensions) this.updateDimensions() }, beforeDestroy() { window.removeEventListener('resize', this.updateDimensions) } } </script> <style scoped> .marquee { overflow: hidden; white-space: nowrap; } .marquee-inner { display: inline-block; animation: none; } </style> ``` 该组件包含一个名为 `Marquee` 的 Vue 组件,它具有以下功能: - 在组件内部包含一个具有 `marquee-inner` 类名的 div 元素,用于包含实际的滚动内容。 - 使用 `requestAnimationFrame` API 实现动画效果。 - 使用 `translateX` CSS 属性在水平方向上移动滚动内容。 - 监听窗口大小变化事件,并在更新时重新计算滚动内容的宽度。 使用该组件时,只需要将需要滚动的内容放入组件的插槽中即可: ```vue <marquee> <span>这是滚动的文字1</span> <span>这是滚动的文字2</span> <span>这是滚动的文字3</span> <span>这是滚动的文字4</span> </marquee> ``` 你可以根据需要自定义组件的样式,例如设置滚动速度等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值