fix(about): 优化标签滚动逻辑以避免相邻重复
- 调整标签分配策略,优先放置原始标签 - 实现标签克隆功能,支持无缝滚动效果 - 在所有原始标签后追加克隆节点 - 为克隆节点添加 data-clone 属性标识
This commit is contained in:
25
js/about.js
25
js/about.js
@@ -498,7 +498,7 @@ function initHorizontalTechCloud(items) {
|
|||||||
row2.className = 'tech-row';
|
row2.className = 'tech-row';
|
||||||
row3.className = 'tech-row';
|
row3.className = 'tech-row';
|
||||||
|
|
||||||
// 将标签分配到三行中
|
// 将标签分配到三行中(先放原始标签,避免相邻重复)
|
||||||
sortedItems.forEach(function(item, index) {
|
sortedItems.forEach(function(item, index) {
|
||||||
var el = document.createElement('span');
|
var el = document.createElement('span');
|
||||||
el.className = 'cloud-tag';
|
el.className = 'cloud-tag';
|
||||||
@@ -514,18 +514,21 @@ function initHorizontalTechCloud(items) {
|
|||||||
} else {
|
} else {
|
||||||
row3.appendChild(el);
|
row3.appendChild(el);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 为每个标签复制一个副本,实现无缝滚动效果
|
|
||||||
var elClone = el.cloneNode(true);
|
|
||||||
if (index % 3 === 0) {
|
|
||||||
row1.appendChild(elClone);
|
|
||||||
} else if (index % 3 === 1) {
|
|
||||||
row2.appendChild(elClone);
|
|
||||||
} else {
|
|
||||||
row3.appendChild(elClone);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 追加克隆集合(在所有原始标签之后再追加一轮,用于无缝滚动)
|
||||||
|
function appendClones(row) {
|
||||||
|
var originals = Array.from(row.children);
|
||||||
|
originals.forEach(function(node) {
|
||||||
|
var clone = node.cloneNode(true);
|
||||||
|
clone.setAttribute('data-clone', 'true');
|
||||||
|
row.appendChild(clone);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
appendClones(row1);
|
||||||
|
appendClones(row2);
|
||||||
|
appendClones(row3);
|
||||||
|
|
||||||
container.appendChild(row1);
|
container.appendChild(row1);
|
||||||
container.appendChild(row2);
|
container.appendChild(row2);
|
||||||
container.appendChild(row3);
|
container.appendChild(row3);
|
||||||
|
|||||||
Reference in New Issue
Block a user