马黑黑 发表于 2025-2-15 10:37

No Happy Endings（scroll版纵向翻页）

<style>
        #papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp3/ims.webp') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
        #stage { position: absolute; width: 460px; height: 600px; overflow: hidden; cursor: pointer; }
        #stage img { width: 100%; height: 100%; float: left; mask: radial-gradient(closest-side, red, red, transparent); }
        #stage img:hover { mask: unset; }
        #btnplay { --state: running; position: absolute; bottom: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
        #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
        #btnplay:hover::before { border-style: dotted; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="stage">
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
        </div>
        <div id="btnplay">1</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27770747" autoplay loop></audio>
</div>

<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
        btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
        aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
        idx = Math.floor(Math.random() * images.length);
        if(idx === lastIdx) idx = (idx+1) % images.length;
        lastIdx = idx;
        btnplay.innerText = idx + 1;
        stage.scroll({top: idx * stage.clientHeight, behavior: 'smooth'});
        if(pTimer) clearTimeout(pTimer);
        pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.scrollIntoView(true);
</script>

马黑黑 发表于 2025-2-15 10:37

代码

<style>
        #papa { margin: 30px 0 30px calc(50% - 601px); width: 1200px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp3/ims.webp') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
        #stage { position: absolute; width: 460px; height: 600px; overflow: hidden; cursor: pointer; }
        #stage img { width: 100%; height: 100%; float: left; mask: radial-gradient(closest-side, red, red, transparent); }
        #stage img:hover { mask: unset; }
        #btnplay { --state: running; position: absolute; bottom: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
        #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
        #btnplay:hover::before { border-style: dotted; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <div id="stage">
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
                <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
        </div>
        <div id="btnplay">1</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27770747" autoplay loop></audio>
</div>

<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
        btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
        aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
        idx = Math.floor(Math.random() * images.length);
        if(idx === lastIdx) idx = (idx+1) % images.length;
        lastIdx = idx;
        btnplay.innerText = idx + 1;
        stage.scroll({top: idx * stage.clientHeight, behavior: 'smooth'});
        if(pTimer) clearTimeout(pTimer);
        pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.scrollIntoView(true);
</script>

马黑黑 发表于 2025-2-15 10:45

垂直翻页的实现原理：

父元素宽高固定，这样就迫使行内标签属性的 IMG标签 纵向排列，但图片间会有一个空格距离的缝隙，父元素用 font-size: 0; 或 line-height: 0; 都能将缝隙消除；还有针对图片元素CSS属性的，浮动，float: left; ，也可以消除图片间的缝隙。顺便提一下：横向和纵向排列，用父元素的 font-size: 0; 或子元素的 float: left; 都可以消除缝隙。

马黑黑 发表于 2025-2-15 10:51

这个版本，图片椭圆效果不像前面的版本使用父元素的 border-radius: 50%; 属性完成，而是完全由子元素的 mask 属性加以实现。试比较两个版本基于mask属性的设置差异：

之前的版本：mask: radial-gradient( red, transparent);
现在的版本：mask: radial-gradient(closest-side, red, red, transparent);

花飞飞 发表于 2025-2-15 11:32

矮油，原来竖版的是最新版本。。刚才看到了，惊艳。。

花飞飞 发表于 2025-2-15 11:34

马黑黑 发表于 2025-2-15 10:45
垂直翻页的实现原理：

父元素宽高固定，这样就迫使行内标签属性的 IMG标签 纵向排列，但图片间会有一个 ...

记得之前做全景无缝衔接滚动的时候，需要消缝隙，这个一张张显示也需要么。。
这阵子落好多贴子没看，先点个 卯，慢慢细看。{:4_173:}

马黑黑 发表于 2025-2-15 11:43

花飞飞 发表于 2025-2-15 11:34
记得之前做全景无缝衔接滚动的时候，需要消缝隙，这个一张张显示也需要么。。
这阵子落好多贴子没看，先 ...

scroll翻页的效果预期是图片完整落在父元素中，这就需要精准计算翻页的横向或纵向的精确距离，缝隙会影响距离的计算

马黑黑 发表于 2025-2-15 11:44

花飞飞 发表于 2025-2-15 11:32
矮油，原来竖版的是最新版本。。刚才看到了，惊艳。。

横竖都是翻页{:4_170:}

花飞飞 发表于 2025-2-15 11:46

马黑黑 发表于 2025-2-15 11:43
scroll翻页的效果预期是图片完整落在父元素中，这就需要精准计算翻页的横向或纵向的精确距离，缝隙会影响 ...

如果有缝隙，有一部分图会掉到缝隙中，显示没那么完美了就是。。好哒。

花飞飞 发表于 2025-2-15 11:47

马黑黑 发表于 2025-2-15 11:44
横竖都是翻页

反正这一页是非过不可了{:4_170:}

马黑黑 发表于 2025-2-15 11:48

花飞飞 发表于 2025-2-15 11:47
反正这一页是非过不可了

一切都会翻过去的

马黑黑 发表于 2025-2-15 11:50

花飞飞 发表于 2025-2-15 11:46
如果有缝隙，有一部分图会掉到缝隙中，显示没那么完美了就是。。好哒。

是这个意思

花飞飞 发表于 2025-2-15 11:59

马黑黑 发表于 2025-2-15 11:48
一切都会翻过去的

都跟筋斗云一样啊

花飞飞 发表于 2025-2-15 12:00

马黑黑 发表于 2025-2-15 11:50
是这个意思

嗯哪，等跟贴 的时候试试体会比较深刻

红影 发表于 2025-2-15 13:45

马黑黑 发表于 2025-2-15 10:51
这个版本，图片椭圆效果不像前面的版本使用父元素的 border-radius: 50%; 属性完成，而是完全由子元素的 ma ...

看到了，当鼠标移动上去就能看出和前面的不同了{:4_187:}

马黑黑 发表于 2025-2-15 13:46

红影 发表于 2025-2-15 13:45
看到了，当鼠标移动上去就能看出和前面的不同了

眼尖

红影 发表于 2025-2-15 13:47

无缝衔接，真好{:4_187:}
把left换成top就变纵向移动了。

红影 发表于 2025-2-15 13:48

这个好像是随意转到任意图图的，怎样能依次演示呢？

马黑黑 发表于 2025-2-15 13:48

红影 发表于 2025-2-15 13:47
无缝衔接，真好
把left换成top就变纵向移动了。
你去看樵歌以发现的文章模板

马黑黑 发表于 2025-2-15 13:50

红影 发表于 2025-2-15 13:48
这个好像是随意转到任意图图的，怎样能依次演示呢？

依次演示需要另外设计运行函数，可参照第一个实现初探的帖子
页: [1] 2 3 4 5 6
查看完整版本: No Happy Endings（scroll版纵向翻页）