前言
在许多网页上我们都可以看到,标题滚动的效果。几天我就来讲一下这个效果使用vue怎么实现
效果:
当鼠标移入跑马灯文字时,跑马灯文字暂停滚动,反之鼠标移出继续滚动。
知识点:
- substring(字符串截取)
- setInterval定时器(解决字符串持续截取与头尾拼接)
- clearInterval清除定时器(解决悬停暂停)
- ES6箭头函数(解决this指向)
具体怎么实现:代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<title>跑马灯效果</title>