一、第一种方式:滚动ul + animate方法
不足之处: 存在浏览器兼容性问题,低版本浏览器无效
代码:
html:
<div class="notice"">
<ul id="notice-ul">
<li v-for="i in 6" :key="i">第{{ i }}条公告哈哈哈哈哈哈</li>
</ul>
</div>
vue:
data() {
return {
timerNotice: null, // 通知滚动定时器
}
}
beforeDestroy() {
// 销毁定时器
clearInterval(this.timerNotice);
},
methods: {
// 鼠标移入移出topic-ul,
mouse() {
let _this = this
const el = document.getElementById('notice-ul');
el.addEventListener('mouseenter' , function(){
clearInterval(_this.timerNotice);
})
el.addEventListener('mouseleave' , function(){
_this.startAnimation();
})
},
// 开始滚动
startAnimation() {
// 调用 公告滚动函数
/*
通知滚动
* 参数说明
* obj : 动画的节点,本例中是ul
* top : 动画的高度,本例中是-35px;注意向上滚动是负数
* time : 动画的速度,即完成动画所用时间,本例中是500毫秒,即marginTop从0到-35px耗时500毫秒
* function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后;
*
*/
this.timerNotice = setInterval((obj = 'notice-ul',top = '-35px',time = 500)=> {
const el = document.getElementById(obj)
el.animate({
marginTop: top
}, time, function () {
el.css({marginTop:"0"}).find(":first").appendTo(this);
})
}, 3000);
},
}
css:
.notice-search {
display: flex;
justify-content: space-between !important;
.notice {
flex: 1;
display: flex;
height: 35px;/*固定公告栏显示区域的高度*/
overflow: hidden;
margin-right: 20px;
color: #fff;
display: flex;
}
.notice img {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 20px;
height: 20px;
}
.notice ul {
padding-left: 10px;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
.notice ul:hover {
animation-play-state:paused;
}
.notice ul li {
margin: 0;padding: 0;
list-style: none;
line-height: 35px;
/*以下为了单行显示,超出隐藏*/
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.search-box {
display: flex;
justify-content: flex-end;
flex: 1;
text-align: right;
}
}
二、第二种方式:滚动li
优点: 兼容性好
代码:
html:
<div class="notice">
<ul id="notice-ul">
<li @click="details(notice)" v-for="(notice,index) in homeNoticeList" :key="index">{{notice.title}}</li>
</ul>
</div>
vue:
data() {
return: {
timerNotice: null, // 通知滚动定时器
}
}
beforeDestroy() {
// 销毁定时器
clearInterval(this.timerNotice);
},
methods: {
// 鼠标移入移出topic-ul,
mouse() {
let _this = this
const el = document.getElementById('notice-ul');
el.addEventListener('mouseenter' , function(){
clearInterval(_this.timerNotice);
})
el.addEventListener('mouseleave' , function(){
_this.startAnimation();
})
},
// 开始滚动
/* 参数说明
* obj : 动画的节点,本例中是ul
* top : 动画的高度,本例中是-35px;注意向上滚动是负数
* function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后;
*
*/
startAnimation(obj = 'notice-ul', top = 35, interval = 5000) {
const el = document.getElementById(obj)
if(el) {
const _heigth = "-" + top + 'px'
const _field = el.firstElementChild;
const _childs = el.getElementsByTagName('li')
// 只有一个li不需要滚动
if(_childs.length >1 && _field) {
_field.style.marginTop = _heigth;
this.timerNotice = setInterval(()=> {
var _field = el.firstElementChild;
_field.style.marginTop = "0px";
el.appendChild(_field);
var _field = el.firstElementChild;
_field.style.marginTop = _heigth;
}, interval);
}
}
},
}
css:
.notice {
flex: 1;
display: flex;
height: 35px;/*固定公告栏显示区域的高度*/
overflow: hidden;
margin-right: 20px;
color: #fff;
display: flex;
}
.notice ul {
padding-left: 10px;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
.notice ul:hover {
animation-play-state:paused;
}
.notice ul li {
list-style: none;
line-height: 35px;
/*以下为了单行显示,超出隐藏*/
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.notice ul li:first-child {
margin-top: 0;
transition: margin-top 1s;
}