类似于跑马灯,又类似于swiper的翻页效果。
需求是标签整体为单位进行上下滚动,以展示内容。
功能不难,我却卡了好几天。
我选择了有点小问题的解决方案,setInterval(),先上代码。
var scroll_distance;
var my_scroll_up;
var rebeck_scroll;
var margin_top_px;
// 🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓重点在这里🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓🡓
// 由于代码执行的时间与setInterval执行的时间不一样,两个setInterval先后被执,就会排队
// 所以我设置了与滚动动画时长最长的的保持相同时间
// 但是由于页面加载时有需要等待这么久,所以直接先执行一变整体函数,再将函数放到40s的setInterval里面进行循环
// 减少了阻塞对浏览器产生的压力
whole_scroll_up(16)
setInterval(function(){
whole_scroll_up(16)
},40000)
// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
function whole_scroll_up(count){//count,数据量
if (count>8) {//发生滚动的条件
var single_height = $(".left-real-time-data-wrap-bottom-unit").height();//单个高度
scroll_distance = -count*single_height;
var whole_scroll_once = setInterval(function(){//整体滚动与回滚
my_scroll_up = setInterval(scroll_up_once(),100);//向上滚动
rebeck_scroll = setInterval(scroll_back_once(),100);//向下滚动
clearInterval(whole_scroll_once)//以上动作完成后,清除整体滚动=》上滚+回滚
return false//跳出函数
},100)//利用setInterval来进行循环上滚和回滚动作
}
}
function scroll_up_once(){//上滚函数 只执行一次
$(".left-real-time-data-wrap-bottom").animate({//向上滚动
marginTop: scroll_distance
},40000);
console.log(12);
clearInterval(my_scroll_up);
return false;//跳出函数
}
function scroll_back_once(){//回滚函数 只执行一次
$(".left-real-time-data-wrap-bottom").animate({//归零动画
marginTop: 0
},1000);//样式归零动画过渡时间
setInterval(my_scroll_up);
console.log(555);
clearInterval(rebeck_scroll)
return false;//跳出函数
}
但问题是,不能从根源上解决脚本阻塞的问题,如果能够判断 setInterval()执行结束,或许会好一些。但是上网查询大量资料,对于判断setInterval()执行完毕,我依然没有找到一个能够说服我的方法。
我将此偷巧代码与大家分享,能够给你一些启发肯定最好。但更希望有大佬能够帮助我优化此段代码。非常期望与大家探讨。