No Happy Endings（scroll版）

马黑黑

1

马黑黑

代码：

1. <style>
   
2.         #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; }
   
3.         #stage { position: absolute; width: 460px; height: 600px; font-size: 0; border-radius: 50%; overflow: hidden; white-space: nowrap; cursor: pointer; }
   
4.         #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }
   
5.         #stage img:hover { mask: unset; }
   
6.         #btnplay { --state: running; position: absolute; bottom: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
   
7.         #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
   
8.         #btnplay:hover::before { border-style: dotted; }
   
9.         @keyframes rot { to { transform: rotate(360deg); } }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.         <div id="stage">
    
14.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji01.jpg" />
    
15.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji02.jpg" />
    
16.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji03.jpg" />
    
17.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji04.jpg" />
    
18.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji05.jpg" />
    
19.                 <img alt="" src="https://638183.freep.cn/638183/t24/biu/ji06.jpg" />
    
20.         </div>
    
21.         <div id="btnplay">1</div>
    
22.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27770747" autoplay loop></audio>
    
23. </div>
    
24. 
    
25. <script>
    
26. var lastIdx = 0, pTimer;
    
27. var images = stage.querySelectorAll('img');
    
28. var mState = () => {
    
29.         btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
30.         btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
    
31.         aud.paused ? clearTimeout(pTimer) : turn2();
    
32. };
    
33. var turn2 = (idx) => {
    
34.         idx = Math.floor(Math.random() * images.length);
    
35.         if(idx === lastIdx) idx = (idx+1) % images.length;
    
36.         lastIdx = idx;
    
37.         btnplay.innerText = idx + 1;
    
38.         stage.scroll({left: idx * 460, top: 0, behavior: 'smooth'});
    
39.         if(pTimer) clearTimeout(pTimer);
    
40.         pTimer = setTimeout(turn2, 3000);
    
41. };
    
42. aud.onpause = aud.onplaying = () => mState();
    
43. stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
    
44. </script>

复制代码

马黑黑

这个版本使用的翻页方法是 scroll，取代后花园演示的 scrollIntoView，特点是不会影响下拉阅读、回复等常规论坛交互操作。

代码变化有两个：

一是04行，图片高度属性 height 不能少，以确保图片完美显示；
二是38行，使用图片父元素滚动（scroll）替代图片自身滚动（scrollIntoView）。

红影

果然，图片父元素滚动（scroll）对回帖没什么影响了。黑黑用两个帖子很直观地展示了两者的不同，真好

红影

鼠标触动还能让图片的透明度发生变化，底下的小圆圈里还有第几张图图的序号呢

红影

好吧，看了代码，才知道鼠标触碰不是透明度变化，而是滤镜变化。下面小圆圈鼠标触碰时会改变线型，也很奇妙。

杨帆

这个更实用，完美解决了回帖问题，祝老师节日快乐

小辣椒

黑黑这个做帖里面的实例出来了

小辣椒

这个图片自动转换效果漂亮的，看看代码可以直接套用

马黑黑

小辣椒 发表于 2025-2-14 19:45
这个图片自动转换效果漂亮的，看看代码可以直接套用

完全可以

马黑黑

小辣椒 发表于 2025-2-14 19:44
黑黑这个做帖里面的实例出来了

我就是等你做呢，结果你一直没做

小辣椒

马黑黑 发表于 2025-2-14 13:52
这个版本使用的翻页方法是 scroll，取代后花园演示的 scrollIntoView，特点是不会影响下拉阅读、回复等常规 ...

04 行 #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }

黑黑，你这里是100%是指图片实际尺寸还是：

03行 的  stage { position: absolute; width: 460px; height: 600px;

马黑黑

杨帆 发表于 2025-2-14 17:53
这个更实用，完美解决了回帖问题，祝老师节日快乐

这两个API各有特点

小辣椒

不管了，现在去自己实际测试一下

马黑黑

红影 发表于 2025-2-14 14:37
好吧，看了代码，才知道鼠标触碰不是透明度变化，而是滤镜变化。下面小圆圈鼠标触碰时会改变线型，也很奇妙 ...

这些都是CSS处理的，一个基于遮罩，另一个基于border-style（边框样式）

马黑黑

红影 发表于 2025-2-14 14:28
鼠标触动还能让图片的透明度发生变化，底下的小圆圈里还有第几张图图的序号呢

马黑黑

红影 发表于 2025-2-14 14:26
果然，图片父元素滚动（scroll）对回帖没什么影响了。黑黑用两个帖子很直观地展示了两者的不同，真好{:4_19 ...

scroll直接操作有滚动条的元素，scrollIntoview操作的是被滚动对象

马黑黑

小辣椒 发表于 2025-2-14 19:50
不管了，现在去自己实际测试一下

马黑黑

小辣椒 发表于 2025-2-14 19:49
04 行 #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }

黑黑 ...

当图片以100%渲染时，指它的父元素的尺寸

马黑黑

小辣椒 发表于 2025-2-14 19:49
04 行 #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }

黑黑 ...

然后，在JS里，翻动距离数值以父元素的宽度（横向翻页）或高度（纵向翻页）做依据