v26110257 首页孕妈广场卡堆首次露出时演示左右滑动（只演一次，等首页引导关闭后）
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
deploy
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26110256';
|
||||
var VER = '26110257';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
@@ -91,3 +91,10 @@
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
#gcHome.gv4 .g4-card,#gcHome.gv4 .g4-cat button{transition:none!important}
|
||||
}
|
||||
|
||||
/* 11-03 首次进首页的「可以左右滑」提示：小手 + 气泡，压在卡堆中间偏右 */
|
||||
#gcHome.gv4 .g4-hint{position:absolute;left:0;right:40px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;transform:translateY(-50%);transition:opacity .25s}
|
||||
#gcHome.gv4 .g4-hint.off{opacity:0}
|
||||
#gcHome.gv4 .g4-hand{width:46px;height:46px;margin-left:70px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(80,30,20,.28)}
|
||||
#gcHome.gv4 .g4-hand svg{width:26px;height:26px;fill:none;stroke:#E2694A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
|
||||
#gcHome.gv4 .g4-hint b{padding:6px 12px;border-radius:99px;background:rgba(42,30,30,.72);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
|
||||
|
||||
53
js/gch/v4.js
53
js/gch/v4.js
@@ -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); }
|
||||
})();
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
(function () {
|
||||
var sec = document.getElementById('gcHome');
|
||||
if (!sec) return;
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110256';
|
||||
var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110257';
|
||||
document.head.appendChild(l);
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110256';
|
||||
var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110257';
|
||||
s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); }; /* v4 要先拉 feed.js 才渲染 */
|
||||
document.body.appendChild(s);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user