前言
在许多网页上我们都可以看到,标题滚动的效果。几天我就来讲一下这个效果使用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>
<style>
span {
font-size: 46px;
color: red;
}
</style>
</head>
<body>
<div id="app" align="center">
<div ></div>
<span @mouseout="start" v-on:mouseover="stop">{{ text }}</span>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
text: "跑马灯效果展示~",
ID: null,
},
methods: {
// 开始滚动
start() {
this.ID = setInterval(() => {
// 截取首个字符
var head = this.text.substring(0, 1);
// 截取除首个字符外的所有字符
var foot = this.text.substring(1);
// 拼接后重新渲染text属性值
this.text = foot + head;
}, 100);
},
// 停止滚动
stop(){
// 清除定时器
clearInterval(this.ID);
}
},
})
</script>
</html>
效果: