v26110257 首页孕妈广场卡堆首次露出时演示左右滑动(只演一次,等首页引导关闭后)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
2026-11-03 08:53:00 +00:00
parent 977aeeff5d
commit ec23742458
9 changed files with 76 additions and 18 deletions

View File

@@ -181,9 +181,60 @@
var lastUB = userBand();
window.addEventListener('mb-preg', function () { var u = userBand(); if (u !== lastUB) { lastUB = u; paint(cur, true); } });
paint('', true);
/* 11-03 用户:「首次进入首页时,孕妈广场下面的图片给一个左右滑动的动效,提示用户可以滑」
→ 卡堆第一次露出大半屏时:顶上那张往左探 2 下再回来 + 小手 + 「左右滑动看更多」;只在第一次进首页演一次(mmbox.gc4.hint.v1),
用户自己滑过 / 点过卡堆就不再演;演的过程中一碰就停。系统开了「减少动态效果」不演。 */
var HK = 'mmbox.gc4.hint.v1', hinted = false;
try { hinted = !!localStorage.getItem(HK); } catch (e) {}
function hintDone() { hinted = true; try { localStorage.setItem(HK, '1'); } catch (e) {} }
if (!hinted && !reduce && window.IntersectionObserver && Element.prototype.animate) {
var stage = sec.querySelector('.g4-stage'), hintEl = null, anims = [], hintT = 0;
var stopHint = function () {
clearTimeout(hintT); anims.forEach(function (a) { try { a.cancel(); } catch (e) {} }); anims = [];
if (hintEl) { var h = hintEl; hintEl = null; h.classList.add('off'); setTimeout(function () { h.remove(); }, 260); }
};
['touchstart', 'mousedown'].forEach(function (ev) { deck.addEventListener(ev, function () { if (!hinted) hintDone(); stopHint(); }, { passive: true }); });
/* 卡堆露出 60% 以上(扣掉底部 tab 栏那条)且首页引导 coach.js 的遮罩已关、页面在前台,停 0.5 秒再演;引导还开着就等它关 */
var seen = false, waitT = 0;
function tryPlay() {
clearTimeout(waitT);
if (hinted || !seen) return;
if (document.querySelector('.mb-coach') || document.hidden) { waitT = setTimeout(tryPlay, 700); return; }
hintT = setTimeout(function () {
if (!seen || hinted || document.querySelector('.mb-coach')) { tryPlay(); return; }
io.disconnect();
var c = cards[idx]; if (!c || hinted) return;
hintDone();
stage.insertAdjacentHTML('beforeend', '<div class="g4-hint" aria-hidden="true"><span class="g4-hand"><svg viewBox="0 0 24 24"><path d="M9.5 11.2V5.3a1.5 1.5 0 013 0v5.2m0-.7V9a1.5 1.5 0 013 0v1.6m0-.4a1.5 1.5 0 013 0v4.3c0 3.4-2.4 6-5.7 6h-.9c-1.8 0-3.2-.8-4.3-2.2l-3-4a1.5 1.5 0 012.3-1.9l1.6 1.7V11.2"/></svg></span><b>左右滑动 看更多</b></div>');
hintEl = stage.lastElementChild;
var ez = { duration: 2600, easing: 'ease-in-out', iterations: 1 };
var kf = [
{ transform: 'none', offset: 0 }, { transform: 'translateX(-46px) rotate(-5deg)', offset: .2 }, { transform: 'none', offset: .38 },
{ transform: 'translateX(-46px) rotate(-5deg)', offset: .6 }, { transform: 'none', offset: .78 }, { transform: 'none', offset: 1 }
];
anims.push(c.animate(kf, ez));
var n1 = cards[idx + 1]; /* 后面那张跟着往前凑一点,像要接上来 */
if (n1) anims.push(n1.animate([
{ transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: 0 }, { transform: 'translate(4px,2px) rotate(1.5deg) scale(.97)', offset: .2 },
{ transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: .38 }, { transform: 'translate(4px,2px) rotate(1.5deg) scale(.97)', offset: .6 },
{ transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: .78 }, { transform: 'translate(12px,4px) rotate(4deg) scale(.95)', offset: 1 }
], ez));
var hd = hintEl.querySelector('.g4-hand');
anims.push(hd.animate([
{ transform: 'translateX(0)', opacity: 0, offset: 0 }, { transform: 'translateX(0)', opacity: 1, offset: .04 }, { transform: 'translateX(-60px)', opacity: 1, offset: .2 },
{ transform: 'translateX(0)', opacity: 1, offset: .38 }, { transform: 'translateX(-60px)', opacity: 1, offset: .6 }, { transform: 'translateX(0)', opacity: 1, offset: .78 },
{ transform: 'translateX(0)', opacity: 0, offset: 1 }
], ez));
hintT = setTimeout(stopHint, 2900);
}, 500);
}
var io = new IntersectionObserver(function (es) { seen = es[0].isIntersecting; if (seen) tryPlay(); }, { threshold: .6, rootMargin: '0px 0px -110px 0px' });
io.observe(deck);
}
sec.dispatchEvent(new Event('gc4-ready')); /* V6 合并版等这个再往里插「其他妈妈也在搜」 */
}
/* feed.js 首页默认不加载(index.html 只引了 topics.js),这里按需拉一次 */
if (window.GC_FEED) init();
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110256'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110257'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
})();