摘要:需求是做一个文字走马灯效果,正常写循环动画,切出切回的时候会出现定位错误的bug,查了很多解决方案都没用,最后两种解决方案结合方可奏效,特此记录一下,代码如下。
1.html代码
<!-- 走马灯文字 -->
<div class = "see-video" onclick = "seeVideo()" onmousemove = "clearInterval(timer);" onmouseout = "timer = setInterval(() => {play()}, 3000);">
<div class = "t_news">
<i class = "iconfont icon-shipin"></i>
<ul class="hook_area">
<li>测试精模替换演示视频</li>
<li>测试演示视频</li>
</ul>
<ul class="swap"></ul>
</div>
</div>
2.Css样式
.see-video{
width: 200px;
height: 35px;
background: #363636;
position: absolute;
right: 0;
top: 5px;
overflow: hidden;
border-radius: 10px;
cursor: pointer;
.t_news{
height:19px;
color:#e6e6e6;
padding-left:10px;
margin:8px 0;
overflow:hidden;
position:relative;
i{
float: left;
position: absolute;
left: 17px;
color: #e6e6e6;
font-size: 18px;
top: -4px;
animation: icon_text 0.5s linear 1.5s infinite alternate;
}
}
}
.hook_area,.swap{
line-height:19px;
display:inline-block;
position:absolute;
top:0;
left:45px;
a{
color:#fff;
}
}
.swap{
top:19px;
}
2.script逻辑
// 文字滚动
function play(){
t = parseInt(x.css('top'));
y.css('top','19px');
// 解决方案stop([clearQueue], [gotoEnd])
// clearQueue (可选)Boolean如果设置成true,则清空队列。可以立即结束动画
// gotoEnd (可选)Boolean让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。
x.stop(true,true).animate({top: t - 19 + 'px'},300); //19为每个li的高度
console.log(Math.abs(t) - (h - 19),)
if(Math.abs(t) - (h - 19) == 0 ){ //19为每个li的高度
y.stop(true,true).animate({top:'0px'},300);
z=x;
x=y;
y=z;
}
}
$(function(){
$('.swap').html($('.hook_area').html());
x = $('.hook_area');
y = $('.swap');
h = $('.hook_area li').length * 19; //19为每个li的高度
})
var timer = setInterval(function(){
play()
},3000);
// 监听 visibility change 事件
document.addEventListener('visibilitychange',function(){
var isHidden = document.hidden;
// 如果切出,停止动画
if(isHidden){
console.log('出去了')
clearInterval(timer);
// 切回来,启动动画。为什么重新赋值,测试一下就知道了。
} else {
console.log('回来了')
timer = setInterval(() => {play()}, 3000);
}
}
);
水平有限,还不能写到尽善尽美,希望大家多多交流,跟春野一同进步!!!