在使用js setInterval函数实现时，在老式android机型中，出现严重顿挫感，在iphone 6 plus中表现有轻微顿挫感，如此效果定不可满足产品需求，几个小时时间付之东流......
在请教大佬后，使用jQuery的animate实现，表现情况良好，顺利上线。
整体思路：将数据源添加到占位节点中，开始飘动函数并利用递归方式调用自身，直至飘动完所有数据节点
适用场景：
- 刚进页面时展示弹幕效果，将一定数据飘动完成后结束
- 飘窗广告（需在此demo上进行扩展）
- 实时弹幕效果（需在此demo上进行扩展，此demo没有新增数据方法）
贴上源码：
<html>
<head>
<meta charset="UTF-8">
<title>弹幕飘窗效果</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
overflow : hidden;
}
article {
position : absolute;
width : 100%;
height : 50%;
overflow : hidden;
}
article img {
position : absolute;
width : 48px;
}
</style>
</head>
<body>
<!------------- 飘窗 占位节点，可定义屏幕区域 ------------->
<article id="area"></article>
</body>
<script>
$(function() {
let area = $('#area');
let jqueryDom;
// 在此自定义数据源，以下仅做演示使用
let data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 获取数据源长度，稍后用于停止飘窗效果
let len = data.length;
// 循环将数据源添加到 占位节点规定的指定区域
data.forEach(function() {
// 在此自定义要 飘屏的内容
jqueryDom = $(`
<img src="https://s2.ax1x.com/2019/08/05/e2Lk1H.png"
alt="弹幕背景图">
`);
// 产生随机数值
let top = Math.floor(Math.random() * 60) + "%";
$(jqueryDom).css({
left : area.width() + 27,
top : top
});
area.append(jqueryDom);
});
// 从第一个节点开始飘动
startAnimation(1);
function startAnimation(num) {
let dom = $(`#area img:nth-of-type(${num})`);
dom.animate({left : -(dom.width()) + 'px'}, 8000);
// 递归调用继续下个节点飘动，直到最后一个节点飘动结束后不再调用
setTimeout(function() {
if (num < len) {
startAnimation(num + 1)
}
}, 3000); // 可以调用下一个节点开始的时间，可自己调整下看下效果
}
})
</script>
</html>
网友评论